浏览器渲染过程

1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面；
2. 把请求回来的 HTML 代码经过解析，构建成 DOM 树；
3. 计算 DOM 树上的 CSS 属性；
4. 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度；
6. 合成之后，再绘制到界面上。

Http

HTTP 协议是基于 TCP 协议出现的，对 TCP 协议来说，TCP 协议是一条双向的通讯通道，HTTP 在 TCP 的基础上，规定了 Request-Response 的模式。这个模式决定了通讯必定是由浏览器端首先发起的。

浏览器通过地址栏访问页面都是 GET 方法。表单提交产生 POST 方法。

HEAD 则是跟 GET 类似，只返回请求头，多数由 JavaScript 发起

PUT 和 DELETE 分别表示添加资源和删除资源，但是实际上这只是语义上的一种约定，并没有强约束。

CONNECT 现在多用于 HTTPS 和 WebSocket。

OPTIONS 和 TRACE 一般用于调试，多数线上服务都不支持。

• 1xx：临时回应，表示客户端请继续。

• 2xx：请求成功。

  200：请求成功。

• 3xx: 表示请求的目标有变化，希望客户端进一步处理。

  301&302：永久性与临时性跳转。

  304：跟客户端缓存没有更新。

• 4xx：客户端请求错误。

  403：无权限。

  404：表示请求的页面不存在。

• 5xx：服务端请求错误。

  500：服务端错误。

  503：服务端暂时性错误，可以一会再试。

数组扁平化

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

• reduce

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

• toString & split

arr.toString().split(',')

• join & split

arr.join(',').split(',')

• 递归

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

*es10 array.property.flat

arr.flat(Infinity)

png,gif,jpg差别

minix

react原理

setState发生了什么

虚拟dom

react调度

webpack 自定义loader和plugin

services work

h5性能优化

h5适配

js沙箱隔离

打遍天下无敌手