新一轮知识回顾

浏览器渲染过程

  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差别

类型 png jpg gif bmp
优点 可保存透明背景的图片 文件小,利于网络传输 动画存储格式 无损压缩,图质最好
缺点 画质中等 画质损失 最多256色,画质差 文件太大,不利于网络传输
应用场景 - 车牌识别 - -
相同大小图片比较 202K 84K 53K 152K

minix

react原理

setState发生了什么

虚拟dom

react调度

webpack 自定义loader和plugin

services work

h5性能优化

h5适配

js沙箱隔离

打遍天下无敌手