浏览器解析并渲染页面的过程

浏览器解析并渲染页面的过程

渲染过程

1. 浏览器获取到 html 资源后开始解析 html (dom tree)
2. 解析到 css 后根据 css 生成 css 规则树 (style rules)
3. 在 dom 树和 css 规则树都生成完后，通过 dom 树和 css 规则树生成渲染树( render tree )
4. 渲染树构建完成后，浏览器开始计算元素的大小和位置( layout )
5. 根据计算好的节点信息将内容绘制到屏幕上( painting )

渲染的过程如下图：

渲染过程详解

1. dom 树和 css 规则树的先后顺序

浏览器获取的 html 资源后自上而下开始解析，生成 dom 树；如果遇到 style 的内联样式和 link 会将 css 交由 css 渲染器构建 css 规则树； 其中加载 link 引入的外部样式文件是异步加载的，并且整个 css 规则树也是与 dom 树的构建是并行的；

2. Javascript脚本的加载

由于 js 可以操作 dom，所以在 html 解析到 Javascript 脚本时会停止对 dom 的解析；而 css 的解析会阻塞 js 的执行，所以在某些情况下 css 的解析会导致 dom 的解析；

解决 js 阻塞 dom 解析的方法：