前端面试高频问点

react和vue的区别
Vue的优势

模板和渲染函数的弹性选择
简单的语法和项目配置

更快的渲染速度和更小的体积
React的优势是

更适合大型应用和更好的可测试性
适合搭建更大的生态系统
更多的支持和好用的工具

vue的双向数据绑定的原理 最频繁
vue是采用数据劫持$发布者-订阅者结合的方式，来做数据绑定，核心就是Object.defineProperty()，
劫持各个属性的getter和setter，在数据模型变化的时候，发布消息给订阅者（绑定了数据模型的DOM元素）
触发相应的监听回调。

闭包的作用理解，以及那些地方用过闭包，以及闭包的缺点最频繁
闭包就是能够读取其他函数内部变量的函数

常用的闭包
setTimeout
回调
函数防抖

优点：
1:变量长期驻扎在内存中
2:避免全局变量的污染
3:私有成员的存在

缺点：
常驻内存
会增大内存的使用量
使用不当会造成内存泄露

最简单数组去重法（最简单！）
/*

• 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
• IE8以下不支持数组的indexOf方法
• */
  function uniq(array){
  var temp = []; //一个新的临时数组
  for(var i = 0; i < array.length; i++){
  if(temp.indexOf(array[i]) == -1){
  temp.push(array[i]);
  }
  }
  return temp;
  }
  var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
  console.log(uniq(aa));

为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。主要也是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

为什么浏览器要用同源策略
设置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据

TCP/IP协议 三次握手
第一次握手，建立连接时，客户端发送数据包至服务器 等待服务器确认
第二次握手，服务器收到数据包，确认数据之后，自己也发送数据包至客户端
第三次握手，客户端收到服务器发送的数据包，并且发送确认包，两者进入TCP连接成功状态，完成三次握手

从输入一个url到浏览器页面展示都经历了哪些过程
1- 输入网址 
2- 缓存解析 (浏览器缓存-系统缓存-路由器缓存)
3- 域名解析（访问DNS服务器） 
4- tcp连接，三次握手(浏览器向服务器发起了http请求) 
5- 页面渲染(生成Dom树、解析css样式、js交互)

什么是JS原型链
每一个对象除了null之外 都有另外一个对象与之关联，这个另一个对象便称为原型，
每个对象都是从原型链继承属性，原型链是指一系列链接的原型对象的链便称为原型链

Vue父子组件生命周期顺序

vue封装公共组件（通用组件）需要考虑到什么
高性能、低耦合
一、数据从父组件传入
为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去。

父对子传参，就需要用到 props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则
二、在父组件处理事件

在通用组件中，通常会需要有各种事件，

比如复选框的 change 事件，或者组件中某个按钮的 click 事件

这些事件的处理方法应当尽量放到父组件中，通用组件本身只作为一个中转
三、记得留一个 slot
四、不要依赖 Vuex

apply call bind区别 最频繁
这三者都是用来改变函数的this对象的指向的

call和apply的主要区别是在传递参数上不同，call后面传递的参数是以逗号的形式分开的，apply传递的参数是数组形式（apply是以A开头，所以这里可以跟Array有关联，即参数为数组）
bind返回的是一个函数形式，如果要执行，则后面要再加一个小括号，例如：bind（obj,参数1，参数2）（），bind只能以逗号分隔形式，不能是数组形式。

箭头函数和ES5的this的指向区别
普通函数的this总是代表它的直接调用者，若无则this指的是window，而箭头函数是没有自己的this的，它默认使用父级对象的this，即箭头函数的this是父域中的

watch、methods 和 computed 的区别?最频繁
watch 为了监听某个响应数据的变化。computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。

什么是重绘?
页面发生样式的改变但是不会影响他的位置(例如:字体,背景颜色等等)
什么是回流(重排)?
因为元素的规模尺寸、布局、隐藏等改变时,也就是位置发生改变时,浏览器会重新渲染这个DOM的这一过程称为回流. (回流肯定伴随着重绘,但是重绘不一定会有回流的出现)
什么时候会触发回流(重排)或重绘？
增删dom元素的时候,改变元素位置,改变元素样式宽高大小,页面第一次渲染,浏览器窗口的改变,获取元素的宽高也会出发回流
如何减少重绘和回流（重排）?
在DOM树的最后一个元素改变class,避免设置多层内联样式,避免使用table布局,对于第一次不需要显示的内容设置display:none;开启CSS3硬件加速

列举你ES6 ES7常用的语法（根据个人经验发挥）
let
箭头函数
promise
解构
…扩展操作符
async await

如何解决跨域问题最频繁
jsonp 不常用
proxy代理机制
nginx反向代理（后台配置）
CORS（后台配置）

请描述一下 cookies，sessionStorage 和 localStorage 的区别

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭