浏览器渲染大体分为五个步骤：
1. 处理HTML标记并构建DOM(Documen Object Model) Tree
2. 处理CSS标记并构建CSSOM（CSS Object Model）Tree,(称之为CSS 规则树)
3. 将DOM树和CSS规则树合并成为一个渲染树（Rendering Tree）
4. 根据渲染树进行布局，以计算每个节点的几何信息
5. 将各个节点绘制到屏幕上
阻塞渲染：CSS和Javascript
(渲染树由DOM和CSSOM共同构建，故意味着浏览器在将CSSOM构建完成前，不会完成渲染树的构建: CSS被视为阻塞渲染的资源)
存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。另外：
1.当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
2.JavaScript 可以查询和修改 DOM 与 CSSOM。
3.CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。
l Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算 Render Tree。是 Render Tree 的一部分或全部发生了变化。这就是 Reflow，或是 Layout。（HTML 使用的是 flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 reflow）reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置，在 reflow 过程中，可能会增加一些 frame，比如一个文本字符串必需被包装起来。
l Repaint——屏幕的一部分要重画，比如某个 CSS 的背景色变了。但是元素的几何尺寸没有变。
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。
所以，下面这些动作有很大可能会是成本比较高的。
· 当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
· 当你移动 DOM 的位置，或是搞个动画的时候。
· 当你修改 CSS 样式的时候。
· 当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
· 当你修改网页的默认字体时。
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
8853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
