javascript回流和重绘

一. 什么是DOM

DOM: Document Object Model 文档对象模型

只有JavaScript才能调用DOM这个API吗?

答案是否

Python也可以访问DOM

PS: 实质上还存在CSSOM: CSS Object Model, 浏览器将CSS代码解析成树形的数据结构，与DOM是两个独立的数据结构

浏览器渲染过程

讨论DOM操作成本，肯定要先了解该成本的来源，那么就离不开浏览器渲染

解析HTML，构建DOM树（这里遇到外链，此时会发起请求）
解析CSS，生成CSS规则树
合并DOM树和CSS规则，生成render树
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上

1. 构建DOM树

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>DOM tree</title>
    </head>
    <body>
        <p>Hello <span>DOM</span> World!</p>
        <div><img src="awesome-photo.jpg"></div>
    </body>
</html>

无论是DOM还是CSSOM, 都要经过 Bytes -> characters -> tokens -> nodes -> objectmodel

DOM树构建过程: 当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2. 构建CSSOM树

上述也提到了CSSOM的构建过程，也是树的结构，在最终计算各个节点的样式时，浏览器都会先从该节点的普遍属性（比如body里设置的全局样式）开始，再去应用该节点的具体属性。还有要注意的是，每个浏览器都有自己默认的样式表，因此很多时候这棵CSSOM树只是对这张默认样式表的部分替换。

3. 生成render树

DOM树和CSSOM树合并生成render树

简单描述这个过程：

DOM树从根节点开始遍历可见节点，这里之所以强调了“可见”，是因为如果遇到设置了类似 display:none;的不可见节点，在render过程中是会被跳过的（但 visibility:hidden;opacity:0这种仍旧占据空间的节点不会被跳过render），保存各个节点的样式信息及其余节点的从属关系。

4. Layout 布局

有了各个节点的样式信息和属性，但不知道各个节点的确切位置和大小，所以要通过布局将样式信息和属性转换为实际可视窗口的相对大小和位置。

5. Paint 绘制

万事俱备，最后只要将确定好位置大小的各节点，通过GPU渲染到屏幕的实际像素。

Tips

在上述渲染过程中，前3点可能要多次执行，比如js脚本去操作dom、更改css样式时，浏览器又要重新构建DOM、CSSOM树，重新render，重新layout、paint；
Layout在Paint之前，因此每次Layout重新布局（reflow 回流）后都要重新出发Paint渲染，这时又要去消耗GPU；
Paint不一定会触发Layout，比如改个颜色改个背景；（repaint 重绘）
图片下载完也会重新出发Layout和Paint；

二. 回流和重绘

何时触发

reflow(回流): 根据Render Tree布局(几何属性)，意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树；

repaint(重绘): 意味着元素发生的改变只影响了节点的一些样式（背景色，边框颜色，文字颜色等），只需要应用新样式绘制这个元素就可以了；

所以reflow回流的成本开销要高于repaint重绘，一个节点的回流往往回导致子节点以及同级节点的回流

GoogleChromeLabs 里面有一个csstriggers，列出了各个CSS属性对浏览器执行Layout、Paint、Composite的影响。

引起reflow回流

现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。

页面第一次渲染（初始化）
DOM树变化（如：增删节点）
Render树变化（如：padding改变）
浏览器窗口resize
获取元素的某些属性：浏览器为了获得正确的值也会提前触发回流，这样就使得浏览器的优化失效了，这些属性包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、调用了getComputedStyle()或者IE的currentStyle

引起repaint重绘

reflow回流必定引起repaint重绘，重绘可以单独触发
背景色、颜色、字体改变（注意：字体大小发生变化时，会触发回流）

优化reflow、repaint触发次数

避免逐个修改节点样式，尽量一次性修改
使用DocumentFragment将需要多次修改的DOM元素缓存，最后一次性append到真实DOM中渲染
可以将需要多次修改的DOM元素设置 display:none，操作完再显示。（因为隐藏元素不在render树内因此修改隐藏元素不会触发回流重绘）
避免多次读取某些属性（见上）
将复杂的节点元素脱离文档流，降低回流成本

DOMContentLoaded 和 load

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片…
load 事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

CSS 资源阻塞渲染

构建Render树需要DOM和CSSOM，所以HTML和CSS都会阻塞渲染。所以需要让CSS尽早加载（如：放在头部），以缩短首次渲染的时间。

JS 资源

阻塞浏览器的解析，也就是说发现一个外链脚本时，需等待脚本下载完成并执行后才会继续解析HTML。

这和之前文章提到的浏览器线程有关，浏览器中js引擎线程和渲染线程是互斥的，详见《从setTimeout-setInterval看JS线程》

普通的脚本会阻塞浏览器解析，加上defer或async属性，脚本就变成异步，可等到解析完毕再执行。

async异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在onload前，但不确定在DOMContentLoaded事件的前后
defer延迟执行，相对于放在body最后（理论上在DOMContentLoaded事件前）
浏览器拿到HTML后，从上到下顺序解析文档
此时遇到css、js外链，则同时发起请求
开始构建DOM树
这里要特别注意，由于有CSS资源，CSSOM还未构建前，会阻塞js（如果有的话）
无论JavaScript是内联还是外链，只要浏览器遇到 script 标记，唤醒 JavaScript解析器，就会进行暂- 停 blocked 浏览器解析HTML，并等到 CSSOM 构建完毕，才执行js脚本
渲染首屏（DOMContentLoaded 触发，其实不一定是首屏，可能在js脚本执行前DOM树和CSSOM已经构建完- render树，已经paint）