本人前端的面试笔记

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

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，这个凭据是很重要的，能识别用户所拥有的权限。