Browser 重流和重绘

梦里梦外; 2022-03-09 03:30 165阅读 0赞

浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。

### 渲染引擎 ###

渲染引擎的主要作用是，将网页代码渲染为用户视觉可以感知的平面文档。

不同的浏览器有不同的渲染引擎。

*  Firefox：Gecko 引擎
 *  Safari：WebKit 引擎
 *  Chrome：Blink 引擎
 *  IE: Trident 引擎
 *  Edge: EdgeHTML 引擎

渲染引擎处理网页，通常分成四个阶段。

1.  解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
2.  对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
3.  布局：计算出渲染树的布局（layout）。
4.  绘制：将渲染树绘制到屏幕。

以上四步**并非严格按顺序执行**，往往第一步还没完成，第二步和第三步就已经开始了。所以，会看到这种情况：网页的 HTML 代码还没下载完，但浏览器已经显示出内容了。

### 重流和重绘 ###

渲染树转换为网页布局，称为“`布局流`”（flow）；布局显示到页面的这个过程，称为“`绘制`”（paint）。它们都具有**阻塞效应**，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“重流”（reflow）和“重绘”（repaint）。用户的互动也会触发重流和重绘，比如设置了鼠标悬停（a:hover）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。

重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致重绘和重流。

大多数情况下，浏览器会智能判断，将重流和重绘只限制到相关的子树上面，最小化所耗费的代价，而不会全局重新生成网页。

作为开发者，应该尽量设法降低重绘的次数和成本。比如，尽量不要变动高层的 DOM 元素，而以底层 DOM 元素的变动代替；再比如，重绘table布局和flex布局，开销都会比较大。

##### 下面是一些优化技巧。 #####

*  读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
 *  缓存 DOM 信息。
 *  不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
 *  使用documentFragment操作 DOM
 *  动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
 *  只在必要时才显示隐藏元素。
 *  使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
 *  使用虚拟 DOM（virtual DOM）库。

下面是一个`window.requestAnimationFrame()`对比效果的例子。

// 重绘代价高
    function doubleHeight(element) { 
      var currentHeight = element.clientHeight;
      element.style.height = (currentHeight * 2) + 'px';
    }
    
    all_my_elements.forEach(doubleHeight);
    
    // 重绘代价低
    function doubleHeight(element) { 
      var currentHeight = element.clientHeight;
    
      window.requestAnimationFrame(function () { 
        element.style.height = (currentHeight * 2) + 'px';
      });
    }
    
    all_my_elements.forEach(doubleHeight);

上面的第一段代码，每读一次 DOM，就写入新的值，会造成不停的重排和重流。第二段代码把所有的写操作，都累积在一起，从而 DOM 代码变动的代价就最小化了。