总体上说，网页的渲染过程要经历以下几个阶段：
-
解析 HTML 标签, 构建 DOM 树
- DOM是Document Object Model[文档对象模型]的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面中其他的标准组件。
- DOM是以[层次结构]组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。
- 在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。每个[节点]都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）。
-
HTML DOM.png
-
解析 CSS 标签, 构建 CSSOM 树
- cssom树的构建分为两种情况 一种是webkit的Attachment，一个是firefox的Content Model和Style Rule，Style Rule是用来帮助构建Content Model的
-
把 DOM 和 CSSOM 组合成渲染树 (render tree)
-
webkitflow.png
-
firefox.png
-
-
在渲染树的基础上进行布局, 计算每个节点的几何结构
-
HTML DOM & The render tree.png
-
Firefox.png
- 定位坐标和大小，是否换行，各种position, overflow, z-index属性
- 这里存在两个概念：
- Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
- Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow ）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。
- DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程是非常痛苦和耗电的。
- 下面这些动作有很大可能会是成本比较高的。
- 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
- 当你移动DOM的位置，或是搞个动画的时候。
- 当你修改CSS样式的时候。
- 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
- 当你修改网页的默认字体时。
- 注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。
- 尽可能避免这些情况的做法建议
- 不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。
- 把DOM离线后修改。如：
- 使用documentFragment 对象在内存里操作DOM
- 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
- clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
- 不要把DOM结点的属性值放在一个循环里当成循环里的变量。 不然这会导致大量地读写这个结点的属性。
- 尽可能的修改层级比较低的DOM 。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小。
- 为动画的HTML元件使用fixed或absoult的position ，那么修改他们的CSS是不会reflow的。
- 千万不要使用table布局 。因为可能很小的一个小改动会造成整个table的重新布局。
-
-
把每个节点绘制到屏幕上 (painting)
- 顺序：background color ->background image ->border ->children ->outline
网友评论