高级前端常见面试题

1、请介绍一下回流（Reflow）与重绘（Repaint）
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素
等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影
响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。
重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背
景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示
的回流环节）。这个过程叫做重绘。
重绘不一定导致回流，回流一定会导致重绘
2、1rem、1em、1vh、1px各自代表的含义？
rem ：是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他
元素的长度单位就为rem。
em:子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh :全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的
1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px:px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
3、TCP 传输的三次握手、四次挥手策略
（1）三次握手： 为了准确无误地吧数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据
包送出去后，TCP不会对传送后的情况置之不理，他一定会向对方确认是否送达，握手过程中使用
TCP的标志：SYN和ACK
（2）发送端首先发送一个带SYN的标志的数据包给对方
接收端收到后，回传一个带有SYN/ACK标志的数据包 以示传达确认信息
（3）最后，发送端再回传一个带ACK的标志的数据包，代表“握手”结束
如在握手过程中某个阶段莫明中断，TCP协议会再次以相同的顺序发送相同的数据包

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

至此，完成四次挥手

原型：
所有的函数数据类型都天生自带一个prototype属性，该属性的属性值是一个对象 prototype的属性值中天生自带一个constructor属性，
其constructor属性值指向当前原型所属的类 所有的对象数据类型，都天生自带一个proto属性，该属性的属性值指向当前实例所属类的原型

前端性能优化方案

三个方面来说明前端性能优化
 一： webapck优化与开启gzip压缩 
 1.babel-loader用 include 或 exclude来帮我们避免不必要的转译，不转译node_moudules中的js文件 其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true' 
 2.文件采用按需加载等等
 3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句： accept-encoding:gzip 
 4.图片优化采用svg图片或者字体图标
 5.浏览器缓存机制，它又分为强缓存和协商缓存 		
 二：本地存储——从 Cookie 到 Web Storage、
IndexedDB 说明一下SessionStorage和localStorage还有cookie的区别和优缺点
 三：代码优化
 1.事件代理 
 2.事件的节流和防抖
 3.页面的回流和重绘
 4.EventLoop事件循环机制 
 5.代码优化等等