网页的渲染机制

1. 浏览器读取HTML构建DOM树。
2. 浏览器读取CSS构建CSSOM树。
3. 浏览器将DOM树和CSSOM组合成渲染树 (render tree)。
4. 在渲染树的基础上进行布局，计算每个节点的几何结构。
5. 浏览器把每个节点绘制到屏幕上。

不同的浏览器，呈现机制不一样

• 以IE和chrome为代表：

浏览器会把所有的HTML内容都添加上CSS样式后，再呈现出来，内容过多样式加载过慢会出现白屏问题。

• 以Firefox为代表：

浏览器会渲染一句呈现一句。

如果CSS放在头部，就会页面一点一点呈现。

如果CSS放在尾部，就会出现无样式内容闪烁。