面试之浏览器渲染原理

浏览器渲染过程

1. 解析HTML并构建DOM树
2. 处理CSS构建CSSOM树
3. 将ＤＯＭ与CSSOM合并成一个渲染树Render Tree
4. 根据渲染树来布局，计算每个节点的位置Layout
5. 调用GPU绘制，合成图层，显示在屏幕上 Painting

 

回流（重排reflow）

        当DOM的变化影响了元素的几何属性（宽和高），比如改变边框宽度或给段落增加文字，导致行数增加。浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

 

重绘

         完成重排后，浏览器会重新绘制受影响的部分到屏幕中。布局不会变化的DOM属性修改，例如改变原始背景色，这种情况只会发生一次重绘。

触发重排

1. 添加或者删除可见DOM元素
2. 元素位置变化
3. 元素尺寸改变（包括：外边界、内边距、边框厚度、宽度、高度等属性改变）
4. 内容改变，例如：文本改变或图片被另一个不同尺寸的图片替代
5. 页面渲染器初始化
6. 浏览器窗口尺寸改变

最小化重绘和重排

1. 减少发生次数，合并多次ＤＯＭ和样式的修改，例如：使用cssText一次性修改，或者直接修改样式名称
2. 不要在布局信息改变时查询影响重排的属性（例如：offsetTop等offset属性 ，scrollTop等scroll属性，client属性，getComputedStyle（））
3. 批量修改DOM，首先使元素脱落文档流，然后对其修改 ，最后把元素带回文档。
4. 缓存布局信息
5. 让元素脱离动画流

脱离DOM文档方法

1. 隐藏元素，应用修改，重新显示
2. 使用文档片段在当前DOM之外构建一个子树，再把文档拷贝回文档。
3. 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后替代原始元素。