2-1.JS相关概念-2 网页渲染机制

参考文献
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">