概念

事件委托，事件代理

事件代理又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
事件传播分为三个阶段：
捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；
可以大大优化内存占用，不用给每个子元素都添加事件。

回流和重绘

页面渲染时，先生成dom树，再结合css生成rander树
回流的成本更大
重绘不一定引起回流，但回流一定会引起重绘
尽量减少对dom的直接操作，减少回流的次数，可以大大提高性能

说说TCP传输的三次握手，四次挥手策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。

用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次挥手”：

• 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
• 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
• 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
• 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

说说你对作用域链的理解

我们可以把作用域链比喻成一个内外多层城堡，建筑的最外层代表全局作用域。
查找变量首先都会在当前层进行查找，如果没有找到，就会前往外层查找，直到抵达最外层（全局作用域），不管找到没找到查找过程都将停止。
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，直到window对象即被终止，作用域链向下访问变量是不被允许的。
内层可以看外层，外层不能看内层。

说说HTTP和HTTPS和区别

HTTP协议是基于TCP协议的，HTTPS在HTTP和TCP之间添加一个安全协议层（SSL或TSL）。
HTTP默认的端口号为80，HTTPS默认的端口号为443
HTTPS安全，是因为网络请求中间有多个路由交换器设备的转发，中间的节点都可能篡改信息。HTTPS利用ssl/tls协议传输，它包含证书，密钥在你和终点站才有，保障了传输过程的安全。

Javascript垃圾回收方法

标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。

引用计数(reference counting)
引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

谈谈性能优化问题

代码层面：避免使用css通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存
请求数量：使用字体图标，避免频繁使用图片。
请求带宽：压缩文件，开启GZIP，
少用全局变量
减少DOM操作次数，优化javascript性能
多个变量声明合并
适当使用touch事件代替click事件
避免使用css3渐变阴影效果
Float在渲染时计算量比较大，尽量减少使用
Web字体需要下载，解析，重绘当前页面，尽量减少使用。
可以用transform: translateZ(0)来开启硬件加速
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用，过渡使用会引发手机过耗电增加

盒模型宽度计算方式

box-sizing盒模型默认的值是content-box, 新增border-box怪异盒模型
content-box布局所占宽度Width
= width + padding-left + padding-right + border-left + border-right
border-box局所占宽度Width
= width(包含padding-left + padding-right + border-left + border-right)

解释下浮动和它的工作原理

浮动元素脱离文档流，不占据空间。
清除浮动的方法：

1.使用空标签清除浮动。
<div style="clear:both;"></div>
弊端就是增加了无意义标签
2.使用overflow。
给包含浮动元素的父标签添加css属性overflow:auto; 
3.使用after伪类清除浮动。
  #parent:after{
        content:".";
        height:0;
        visibility:hidden;
        display:block;
        clear:both;
        }

为何在VUE项目中data需要使用return返回数据呢

答：不使用return包裹的数据会在项目的全局可见，会造成变量污染。使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

谈谈Vue/React中的虚拟DOM

虚拟DOM的本质是一个和真实DOM结构类似的JS对象。
操作JS对象，操作真实的DOM消耗的性能较多，操作虚拟DOM可以大大提高浏览器的渲染速度。
虚拟DOM的实现步骤？
1、在页面首次渲染时，将要渲染的数据全部加载到虚拟DOM中，而后在一次性渲染到真实DOM上
2、在数据变化时，额外的生成一颗虚拟DOM树
3、通过Diff算法对比修改的部分，而后将修改部分渲染到真实的DOM中
4、释放内存
Key值的用处，虚拟DOM在使用Diff算法进行对比时，可以更高效。