性能优化之渲染优化

本文最后更新于：2021/07/05 , 星期一 , 21:32

浏览器渲染过程（对应面试题：从用户输入url到显示都发生了什么）

省略网络相关部分。
渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
创建布局树，并计算元素的布局信息。
对布局树进行分层，并生成分层树。
为每个图层生成绘制列表，并将其提交到合成线程。
合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

主流程：DOM -》Style-》Layout-》Layer-》Paint

布局

重排（回流）和重绘

通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段（即从上文序号2开始），这个过程就叫重排。

通过 JavaScript 或者 CSS 修改元素没有引起几何位置的变换（即绘制属性（元素的颜色、背景色、边框等）），布局阶段将不会被执行，直接进入了绘制阶段，然后执行之后的一系列子阶段（即跳过序号3，4），这个过程就叫重绘。

影响重排（回流）的操作

添加/删除元素
操作styles
display:none
offsetLeft,scrollTop,clientWidth
移动元素位置
修改浏览器大小，字体大小。

批量添加DOM时可以使用DocumentFragment

避免Layout thrashing

避免重排（回流）
读写分离：FastDom，原理：读写分离，批量操作，使用window.requestAnimationFrame。

帧的生命周期

减少重绘的方案

利用DevTools识别paint的瓶颈
利用will-change创建新图层

触发合成过程的属性

渲染引擎将跳过布局和绘制，只执行后续的合成操作，这个过程叫做合成。

位置：transform：translate
缩放：transform：scale
旋转：transform：rotate
透明度：opacity

使用Flexbox优化布局

栅格方案性能对比（float vs flex）：分别用float 和 flex实现渲染10w个大小一样的div块，然后使用ChromDevTools-Performance进行查看

float：rendering（Recalculate+Layout）：1804ms Painting：60ms
flex：rendering（Recalculate+Layout）：1267ms Painting：34ms

flexbox优势：

更高性能的实现方式
容器有能力决定子元素的大小，顺序，对齐，间隔等。
双向布局

高频事件处理

防抖

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

比如当监听鼠标移动等事件时：

//用来表示事件是否在执行中。
let enabled =false;

window.addEventListener("pointermove",(e)=>{
  if(enabled) return;
  enabled = true;
  //执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
  window.requestAnimationFrame(()=>{
    changeWidth();
    enabled = false;
  })
})

//节流
let enabled = true;

window.addEventListener("pointermove",(e)=>{
  if(enabled){
    enabled = false;
    window.requestAnimationFrame (()=>{
        changeWidth();
    })
    window.setTimeout(()=>enbled = true,50)
  }
})

React时间调度实现

React Fiber：把更新过程碎片化，每执行完一段更新过程，就把控制权交还给React负责任务协调的模块，看看有没有其他紧急任务要做，如果没有就继续去更新，如果有紧急任务，那就去做紧急任务。

基本原理

requestIdleCallback的问题：兼容性不好。在浏览器的空闲时段内调用的函数排队，能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件。
通过rAF模拟rIC：在requestAnimationFrame获取一桢的开始时间，触发一个postMessage，在空闲的时候调用idleTick来完成异步任务。

预渲染

react可以使用react-snap

import { hydrate, render } from "react-dom";
 
const rootElement = document.getElementById("root");
//如果有子节点，表示经历过了ssr
if (rootElement.hasChildNodes()) {
  // 通过该方法进行补水
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}