【前端理论】从浏览器渲染原理挖掘性能优化

《相关知识》
进程process：进程是程序的一次执行过程，是系统进行资源分配和调度的一个独立单位；（饭店）
线程thread：是程序执行中单一的顺序控制流程，是程序执行流的最小单元，是处理器调度和分派的基本单位；（服务员=干活的）
栈内存stack：主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null，以及对象变量的指针；
堆内存heap：主要负责像对象Object这种变量类型的存储；
js数据类型：
1、基本数据类型：Number、String、Boolean、Null、Undefined；
2、引用数据类型：对象数据类型object（数组、对象、日期等）、函数数据类型function；
浏览器内核：（内核：以前指渲染引擎和js引擎，现多指渲染引擎）
Trident：IE、百度、360、搜狗等国内浏览器
Gecko：火狐Mozilla Firefox
Presto=>Blink：Opera欧朋
Webkit：Safari、Webview（App内置浏览器）、移动设备自带浏览器、360、搜狗双核
Webkit=>Blink：Google Chrome谷歌

---

一、浏览器收到代码后：

第一步：
客户端/浏览器（请求request）–服务器端（response响应）–客户端
第二步：
浏览器收到代码，开辟一块栈内存，用于给代码执行提供空间，开始第一次渲染DOM渲染，代码执行方式为：一行一行进栈执行+执行完出栈；
第三步：
当浏览器遇到link、异步script（默认同步阻塞）、img等请求后，开辟第二个全新的线程去加载资源，此时会创建一个任务队列task queue，处理上述请求，微任务优于宏任务执行(宏任务中有微任务也会清空，有宏任务则送到事件队列中去)；
第四步：
当第一个线程进行完第一次渲染，即生成DOM树后，就去任务队列中循环查看是否有执行完的任务，就是event loop事件循环；如果任务队列中有请求任务执行完，就拿到栈内存继续渲染，没有完成的就等，此时就是第二次渲染生成CSSOM树；
第五步：
浏览器将DOM树+CSSOM树结合生成Render tree渲染树，然后进行在当前设备视口下位置、大小的确定（回流Layout）；根据渲染树+回流后几何信息得到节点的绝对像素（重绘Painting）；通知电脑的GPU显卡进行最终（展示Display）；
注！:每次请求至少一次回流+重绘；有回流必触发重绘，重绘不一定触发回流。

二、性能优化

1、DNS缓存、304缓存！！
2、减少http请求次数和大小！！
资源合并压缩；图片懒加载；音视频走流文件；
3、避免DOM回流！！（js代码）

• 放弃传统JS直接操作dom的时代，基于vue/react开始数据影响视图模式；
• 分离读写（借助现代浏览器的渲染等待队列机制，下一行是同类代码会等一起回流），Script元素中对dom的读操作/写操作分开集中写；
• 样式集中改变，比如让JS对元素操作时直接添加写好的写操作的样式类，避免读写操作的交叉；
• 缓存布局信息，本质也是分离读写；

<script>
let a = box.clientWidth;//读操作
let b = box.clientHeight;
box.style.width = a + 10 + 'px';//写操作
box.style.height = b + 10 + 'px';
</script>

• 元素批量修改；
  eg：for循环给ul元素添加li子元素时每次添加都会回流；
  解决方法一：文档碎片

  <ul id="box"></ul>
  <script>
    let frg=document.createDocumentFragment();
    for (let i = 0; i < 5; i++) {
      let newLi = document.createElement('li');
      newLi.innerHTML = i;
      frg.appendChild(newLi);
    }
    box.appendChild(frg);//一次性放到容器，引发一次回流
    frg=null;//文档碎片销毁
  </script>

解决方法二：模板字符串拼接

  <ul id="box"></ul>
  <script>
    let str = ``;
    for (let i = 0; i < 5; i++) {
      str += `<li>${i}</li>`;
    }
    box.innerHTML = str;
  </script>

• 动画效果应用到position属性为absolute或fixed的元素上（脱离文档流），这样回流就是小范围；
• CSS3硬件加速，使用css3中新样式，尽量使用transform\opacity\filters属性不会引发回流；
• 牺牲平滑度换取速度；
• 避免table布局和使用了css的js表达式；

三、DOM的重绘与回流

情况

1、重绘：元素的样式改变，但是宽高、大小、位置不变，会调用GPU对该元素进行单个重绘；
eg：visibility、color、background-color
2、回流：元素的大小或位置发生变化，因为会对其他元素造成影响，所以会整体回流，调用GPU重新绘制渲染树render tree；
eg：添加删除可见DOM元素、元素位置、尺寸、内容变化、浏览器窗口尺寸变化；