理解JavaScript中的Repaint和Reflow

时间 2019-11-07

标签理解 javascript repaint reflow 栏目 JavaScript 繁體版

原文原文链接

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

在深刻了解以前，咱们是否了解浏览器的工做原理呢？

一图赛过千言万语，因此让咱们来了解下浏览器的工做原理javascript

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

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

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

当咱们点击页面上的某个连接或在浏览器的URL地址栏按下Enter键时，向该页面发出HTTP请求，而且相应的服务器提供（一般）HTML文档做为响应。（二者之间发生了不少事情）。node

浏览器解析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
                    [text node]
            p
                strong
                    b
                        [text node]            
            div 
                [text node]
            
            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

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

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

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

Repaint

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

如:

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

均可能触发重绘(Repaint)

Reflow

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

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