理解JavaScript中的Repaint和Reflow

jiezi

5 年前

最近，在研究 React 的虚拟 DOM 如此之快的原因时，我意识到我们对 javascript 性能的了解甚少。所以我写这篇文章是为了帮助提高对 Repaint 和 Reflow 以及 JavaScript 性能的认识。

一图胜过千言万语，所以让我们来了解下浏览器的工作原理

en… 那么什么是浏览器引擎，什么是渲染引擎呢？

浏览器引擎的主要工作 是将 Html 文档以及网页上的其他资源转换成交互可视化的视图，并呈现在用户设备上。除了浏览器引擎，关于相关概念的其他两个常用术语：“layout engine”和“rendering engine”。理论上，布局（layout）和渲染(rendering)（或“painting”）可以由单独的引擎处理。然而，在实践中，它们是紧密耦合的，很少单独考虑。

当我们点击页面上的某个链接或在浏览器的 URL 地址栏按下 Enter 键时，向该页面发出 HTTP 请求，并且相应的服务器提供（通常）HTML 文档作为响应。（两者之间发生了很多事情）。

浏览器解析 HTML 源代码并构造 DOM 树，其中每个 HTML 标记在树中具有对应的节点，并且标记之间的文本块也获得文本节点。DOM 树中的根节点是 documentElement（<html> 标记）
浏览器解析 CSS 代码并感知它。样式信息降级：用户代理样式表的基本规则，如有一个用户样式表，在作者信息页面有一个作者样式表，然后将外部样式，内联样式通过编码成 html 标签的样式属性
然后更有趣的部分是构造渲染树。渲染树有点像 DOM 树，但与 DOM 树完全不匹配。渲染树知道样式，所以如果给一个 div 设置 display 为 none 时，它就不会在渲染树中呈现出来。其他不可见元素也是如此，例如 head 标签和其中的所有内容。另一方面，可能有 DOM 元素在渲染树中用多个节点表示 – 比如文本节点，例如 <p> 标签中的每一行都需要一个渲染节点。渲染树中的节点称为帧或盒子。每一个节点有 CSS 盒子属性 - 宽度，高度，边框，边距等。

一旦构建了渲染树，浏览器就能够在屏幕上绘制渲染树节点。

<html>
<head>
  <title>Repaint And Reflow</title>
</head>
<body>
    
  <p>
    <strong>How's The Josh?</strong>
    <strong><b> High Sir...</b></strong>
  </p>
  
  <div style="display: none">
    Nothing to display
  </div>
  
  <div><img src="..." /></div>
  ...
 
</body>
</html>

表示此 HTML 文档的 DOM 树基本上每个标记都有一个节点，节点之间的每个文本都有一个文本节点（为简单起见，我们忽略了空白也是文本节点的事实）:

    documentElement (html)
        head
            title
        body
            p
                strong
                    
            p
                strong
                    b
                                    
            div 
                
            
            div
                img
            
            ...

渲染树可以是 DOM 树中可见的部分，它缺少一些东西 – head 和隐藏的 div，但它有文本行的附加节点（又名帧，也称为盒子）。

    root (RenderView)
        body
            p
                line 1
            line 2
            line 3
            ...
            
        div
            img
            
    ...

渲染树中的根节点包含所有其他的元素称为帧(盒子)，我们可以将其视为浏览器窗口的内部部分，因为这是页面可以传播的受限区域。从技术上讲，WebKit 内核调用根节点 RenderView，它对应于 CSS 初始包含块，它基本上是从页面顶部（0,0）到（window.innerWidth，window.innerHeight）的视口矩形。

伴随着绘制，总是有一个初始化页面。之后，改变用于渲染树的输入信息可能由其中一个或两个所导致(Repaint 或 Reflow)：

需要重新验证渲染树（或整个树）的部分，并重新计算节点尺寸，这称为reflow，或者 layout, 或者 layouting，注意：一个初始页面至少有一次reflow
由于节点几何属性的变化或者因为样式变化（例如更改背景颜色），需要更新屏幕的某些部分，这时屏幕的更新这称为 repaint 或 redraw

Repaint 和 Reflow 可能很昂贵，它们可能会损害用户体验，并使 UI 显得缓慢

顾名思义，重绘 (Repaint) 只不过是屏幕上的重新绘制元素，因为元素的变化会影响元素的可见性，但不会影响布局

如:

改变元素的可见性
改变元素的轮廓
改变元素的背景

都可能触发重绘(Repaint)

重排 (Reflow) 意味着在文档中重新去计算元素的位置和几何形状。目的是为了重新渲染文档的部分或全部。由于重排在浏览器中是用户行为阻塞的操作，所以对于开发人员怎样去提高重排的时间以及了解各种文档属性（DOM 深度，CSS 规则效率，不同类型的样式更改）对中排时间的影响是很重要的。

有时，重排文档中的单个元素可能需要重排其父元素以及其后的任何元素。

理解JavaScript中的Repaint和Reflow

在深入了解之前，我们是否了解浏览器的工作原理呢？

理解浏览器是怎样将用户界面绘制到屏幕上

Repaint 和 Reflow

Repaint

Reflow