• 本人前端的面试笔记


    纯属是将面试的技术问题记录下来,给需要面试的前端小伙们参考一下,有些问题估计不全面,供参考:

    1、小程序的双向绑定与vue的区别
    他们的区别在于小程序的数据不能同步于视图,必须通过this.setdada方法来同步于视图
    2、v-model指令的原理
    本质就是一个语法糖,在数据单向绑定的基础上,增加了一个监听用户事件并更新数据的功能。
    v-bind:绑定响应事数据
    oninput事件:监听数据变化并改变数据
    3、vue作用域插槽
    一个带数据的插槽,比如说父组件直接使用子组件,但数据却不是父组件给的,而是子组件自己的数据。
    4、vue的生命周期
    Vue生命周期可以总共分为8个阶段:
    beforeCreate(创建前),
    created(创建后),
    beforeMount(载入前),
    mounted(载入后),
    beforeUpdate(更新前),
    updated(更新后),
    beforeDestroy(销毁前),
    destroyed(销毁后)
    5、meta标签的几种用法
    name=值
    keywords:说明网站的关键词是什么
    render:告诉浏览器你的渲染方式
    viewport:告诉浏览器你的视图模式
    auther:标注作者
    http-equiv=值
    refresh:自动刷新并指向某个页面
    set-cookies:设置cookies
    6、闭包
    它是一个能拿到某个作用域变量的方法,由于在js语言中,只有在作用域中才能直接拿到内部变量,因此可以把闭包简单理解成’定义在作用域里的一个方法’
    7、小程序的原理
    小程序本质上是一个单页面应用,所有的页面渲染和事件处理都放到了一个页面,而且小程序是在微信内部的基础上运行,可以调用微信内部的API或接口。架构是以数据驱动为主的模式。UI与数据是分开的。所有的页面更新都是通过数据的改变。
    8、小程序wxml与html的区别
    标签名称不一样
    wxml多了一些wx:if、wx:for等指令属性
    运行的限制:wxml只能在微信上运行,不能在浏览器运行
    组件封装的不同:小程序对所有的标签都进行了封装
    没有dom树:小程序不能像HTML进行dom操作
    9、小程序wxss与css的区别
    小程序wxss继承了css大部分特性,也进行了一些扩展。比如增加新的尺寸单位。
    提供了全局样式和局部样式
    仅支持css部分选择器
    10、什么是vuex?如何用?使用场景?
    vue实例的状态管理。根目录创建一个store.js,然后找到入口文main.js导入store.js,导入后进行注册。使用的场景:组件间值传递、登录状态
    11、vue双向绑定的原理
    vue.js就是对数据劫持并响应触发事件的一种操作。原生js有一种方法可以得到数据的获取值方法和更改值方法,并且能监听到数据改变,从而触发事件进行视图数据的操作。
    12、css优先级计算
    第一级:内联样式值1000
    第二级:id选择器值100
    第三级:类选择器、伪类选择器、属性选择器值10
    第四级:元素选择器、伪元素选择器值1
    13、css水平垂直居中
    第一:flex弹性布局
    第二:设置外边距margin和width
    第三:父元素设置文本居中、高度和行高,子元素设置行内块元素
    第四:浮动垂直居中
    第五:绝对定位垂直居中
    14、前端优化性能的几种方式
    减少请求次数、资源合并和压缩、避免空的src和href、合并样式图片、外部脚本置底、样式放顶部、减少http缓存
    15、站在前端的角度,搞SEO的考虑:
    我会去了解搜索引擎的人工基本原理,各个搜索引擎的区别,人工机器如何工作、搜索引擎将搜索结果如何排序显示


    vue篇
    1、父子组件的传值
    2、vue双向绑定的原理
    采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

    3、watch与computed的区别
    computed支持缓存,只要依赖的数据发生改变,就会重新计算。而watch不支持,数据变化直接发生操作。
    computed不支持异步操作,只要存在异步操作,计算属性将会无效。而watch反之。
    watch监听的函数接收两个参数,一个最新值和一个之前的值。而computed没有。
    watch监听的数据必须是data声明过的数据或者父组件传递过来的props中的值。而computed是存在依赖关系的属性。所以说,watch一般是一对多,computed是多对一的使用


    ES6的新特性
    新增了const和let变量
    字符模板
    剪头函数
    array新方法
    Promise
    增加了类


    前端常见的设计模式
    单例模式
    观察模式
    工厂模式
    命令模式
    策略模式
    混合模式

    跨域
    1、什么是跨域
    指的是一个域下的脚本试图请求另一个域下的资源
    2、什么是同源策略
    协议+域名+端口三者一致
    3、解决跨域的方法
    nginx反向代理、jsonp跨域、蹲守同源策略

    window.onload和document.ready的区别?谁快?
    一个是要资源加载完成,一个是dom完成后,所以dom快

    介绍一下new实例,new过程都干了些什么
    是实例化构造函数获取对象。
    new操作符创建了一个空对象,这个对象的原型指向了构造函数的prototype,执行构造函数后返回这个对象。

    前端安全问题
    1、xss:跨站脚本攻击
    2、csrf:跨站请求伪造


    js遍历方法
    foreach:遍历数组每一项,不影响原数组、every:、map:遍历数组每一项,每一项的值替换成返回值,返回一个新数组、filter:不会改变原数组,返回新数组


    uniapp注意事项
    1、js语法不同
    2、组价内的图片要用绝对路径
    3、css
    4、标签不同
    v-if和v-for
    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中

    什么是事件冒泡?
    当点击子元素的时候,如果父元素或者祖先元素绑定了事件,那么子元素事件触发的时候,父元素或者祖先元素的事件也会被触发。
    什么是事件委托?
    事件委托就是利用事件冒泡,只指定某一个事件处理程序,就可以管理某一类型下的所有事件。

    判断对象是否为空
    1、将对象转化为json字符串,判断是否为{}
    2、object.keys遍历对象,如果有遍历,说明不是空

    浏览器内核

    以上是五大浏览器的简介,接下来是四大内核。在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko。五大浏览器采用的都是单内核,而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。
    作为前端开发,熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
    1、IE浏览器内核:Trident内核,也是俗称的IE内核;
    2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
    3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
    4、Safari浏览器内核:Webkit内核;
    5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
    6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
    7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
    8、百度浏览器、世界之窗内核:IE内核;
    9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;


    防范短信接口被恶意滥用
    1、增加图形验证
    2、单IP限制次数
    3、限制号码发送

    ajax的工作原理
    ajax算是众多技术的集合体(js、xml、dom),工作原理主要是在用户和服务器之间加了一个中间层,使用户操作和服务器响应异步化。不是所有的用户操作都是交给服务器处理的,有些操作也会交给ajax处理。

    我会使用的框架
    bootstrap、layui、element、vant、nuxt、jq、ant、uniapp等等

    后台权限
    权限开发分为三类:页面权限、操作权限、数据权限
    前端一般是对菜单、页面、按钮、请求和响应做处理
    技术这一方面,我是用vue来搞的,其中的菜单控制是根据请求后台给过来的数据,v-for来渲染菜单,数据存储采用了两种:sessionStorage和vuex。界面控制是采用了路由守卫,不过是路由跳转前进行了逻辑处理,说白了就是路由拦截,除了路由拦截之外,还用到了动态路由,防止输入网址非法访问。按钮控制的话,比较简单点,用指令或者自定义指令来控制。还有请求和响应的控制,这一块,我是采用axios的,这是vue也推荐用这个来请求,用了才知道,它不仅能拦截请求和响应,还能取消请求、支持Promise方法、自动把请求和响应数据转换为json数据,浏览器端可防csrf(跨站伪造请求)。当然,前面但凡要请求的,都带上了一个重要的数据,就是登录成功后给的token,这个凭据是很重要的,能识别用户所拥有的权限。

  • 相关阅读:
    学习进度条
    学术诚信与职业道德
    czxt
    操作系统
    04 17评论博客
    0414 结对 2.0 33 34
    0408 汉堡包
    (补)结对心得
    构建之法4读后感
    复利计算4.0
  • 原文地址:https://www.cnblogs.com/murenziwei/p/14029393.html
Copyright © 2020-2023  润新知