参考文献
1.Render-Tree Construction, Layout, and Paint
1.Render-Tree Construction, Layout, and Paint 中译 上、中、下
2.How browsers work
1. 网页渲染步骤
渲染引擎基本流程
- 解析 HTML 标签, 构建 DOM 树；解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)；
- 布局, 计算每个节点的位置和大小；
- 把每个节点绘制到屏幕上。
2.主流程示例
Webkit主流程
Gecko主流程
- Webkit和Gecko基本类似，都是分别解析HTML和CSS，并将其组合起来，加上layout（reflow）之后，进行绘制。
1. CSS阻塞渲染
- CSS也是阻塞页面渲染的资源，所以需要尽早将其下载或利用media属性使部分暂时不需要的CSS不阻塞渲染。
<!--缺省和all效果相同，都会阻塞渲染-->
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<!--通过动态查询设备放置方向，来决定是否使用-->
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<!--用于打印场景时阻塞渲染-->
<link href="print.css" rel="stylesheet" media="print">
