前端面试题汇总1

1，简单讲解下http2的多路复用

　　在http1中，每次请求都会建立TCP连接，也就是3次握手四次挥手，这在请求过程中占用了很长的时间，即使开启了keep-alive，解决了多次连接的问题，但依然还有效率上的问题。

1.     串行的文件输出。
2.     连接数过多。

　　http2采用了二进制格式传输，取代了http1的文本格式，效率更高。多路复用代替了HTTP1的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。消除了因多个TCP连接而带来的延时和内存消耗。 单个连接上可以并行交错的请求和响应，互不影响。

2，谈谈你对TCP三次握手和四次挥手的理解。

　　3次握手：  客户端发送一个带SYN标志的数据包给服务器。 服务端收到后 返回一个带有SYN/ACK标志的数据包表示传达确认信息。 客户端再回传一个带ACK标志的数据包代表握手结束。

　　4次挥手： 客户端进程发出连续释放报文，并停止发送数据。 服务器收到连续释放报文，发出确认报文。 服务器将最后的数据发送完毕，向客户端发送连续释放报文。 客户端收到服务器的连续释放报文，发出确认。服务器收到客户端的确认，进入closed状态。

3，有以下3个判断数组的方法，请分别介绍之间的区别和优劣

Object.prototype.toString.call()、 instanceof、 Array.isArray

　　Object.prototype.toString.call会返回[Object type]，其中的type为当前参数的类型。 这种方法对于所有的类型都能进行判断。

　　instanceof是通过判断当前对象的原型链上是否有对应的prototype。 找到了就是true，找不到返回false。 所以instanceof只能判断对象类型，并且所有的对象类型instanceof Object 都为true

　　Array.isArray用来判断对象是否为数组。

4，介绍下重绘和回流，以及如何进行优化

　　1，浏览器渲染机制

• • 浏览器采用流式布局模型
  • 浏览器会把html解析为dom， 把css解析为cssom，dom和cssom合并就成了render tree
  • 有了rendertree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后绘制也页面上。
  • 由于浏览器使用流式布局，对render tree的计算通常只需要一次遍历。但table及其内部元素除外，他们可能要多次计算，通常可能会花3倍的时间，这就是为什么要避免table布局的原因。

　　2，重绘

　　　　由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘。 例如outline，visibility，color和background-color。

　　3，回流

　　　　页面的布局或者几何属性需要改变就称为回流。 回流是影响浏览器性能的关键因素，因为其变化涉及到了部分或整个页面的布局更新，一个元素的回流可能会导致其之后所有节点的回流。

　　　　回流必然会发生重绘，但重绘不一定引发回流。

　　4， 减少重绘与回流

• • • 设定元素的样式，尽量通过改变元素的class名。
    • 避免设置多项内联样式
    • 应用元素的动画应使用position属性的fixed值或absolute
    • 避免使用table布局

5，用迭代的方式实现flatten函数

        let arr = [1, 2, [3, 4, 5, [6, 7], 8], 9, 10, [11, [12, 13]]];
        
        function flatten(arr) {
            while(arr.some(item => Array.isArray(item))) {
                arr = [].concat(...arr);
            }
            return arr;
        }

　　

function flatten(arr) {
            return arr.reduce((pre, next) => {
                return Array.isArray(next) ? [...pre, ...flatten(next)] : [...pre, next];
            }, [])
}