- 浏览器读取HTML构建DOM树。
- 浏览器读取CSS构建CSSOM树。
- 浏览器将DOM树和CSSOM组合成渲染树 (render tree)。
- 在渲染树的基础上进行布局,计算每个节点的几何结构。
- 浏览器把每个节点绘制到屏幕上。
不同的浏览器,呈现机制不一样
- 以IE和chrome为代表:
浏览器会把所有的HTML内容都添加上CSS样式后,再呈现出来,内容过多样式加载过慢会出现白屏问题。
- 以Firefox为代表:
浏览器会渲染一句呈现一句。
如果CSS放在头部,就会页面一点一点呈现。
如果CSS放在尾部,就会出现无样式内容闪烁。