简述浏览器渲染原理

浏览器渲染原理

浏览器渲染过程

大致过程如下：
1 浏览器获取 HTML 文件构建成文档对象模型树 DOM（Document Object Model）Tree

DOM 树的构建是一个深度优先遍历的过程，当前节点的子节点全部构建才会构建下一个同级节点。DOM 的根节点为 document 对象。

DOM 树的生成过程会被CSS和JS加载执行阻塞。解析过程的实际结束会触发 DOMContentLoaded 事件

2 当解析到样式定义，不管是样式文件还是嵌入的 CSS 都会被解析成层叠样式表模型 CSSOM（CSS Object Model）
3 根据文档模型 DOM 和样式模型CSSOM生成渲染树 Render tree，渲染树中包含DOM中除了不可见(display: none 或 )的所有元素。渲染树即使DOM的直观展示，包含了 DOM 的相应对象和计算后的样式。
4 渲染树的每个元素包含的内容都是计算过的，它被称之为布局 layout，浏览器使用一种流式处理的方法，只需要一次 pass绘制操作就可以布局所有的元素（tables需要多次pass 绘制，pass 表示像素处理和顶点处理）。
5 最后布局完成，渲染树将转化为屏幕上的实际内容，这一步被称为绘制 painting.

JS脚本和CSS文件对渲染过程的影响

CSS 对页面渲染影响

CSS 可以理解为渲染阻塞资源，当遇到样式定义时，浏览器将不会继续渲染已经处理的内容， JS 的执行也会暂停，直到处理 CSSOM 构建完毕。但 CSS 加载不会阻塞DOM树的解析

如果 CSS 文件定义在 head 标签中，则 CSSOM 会先于 DOM 树构建，构建完 CSSOM 后，浏览器就可以边构建 DOM，边完成渲染。

反之如果 CSS 文件定义在所有标签之后，浏览器就会先构建 DOM 树，构建完 DOM 树才开始构建 CSSOM 然后会重新渲染页面，导致资源浪费和不好的交互体验。可能会出现样式混乱、白屏等情况。

所以为了优化首屏的效果，需要将尽量精简的CSS并放在 head 标签中，不重要的 CSS 也可以选择放在所有标签后面，或者使用媒体查询解除 CSS 对渲染的阻塞。

没有 js 的理想情况下，html 与 css 会并行解析，分别生成 DOM 与 CSSOM，然后合并成 Render Tree，进入 Rendering Pipeline；但如果有 js，css 加载会阻塞后面 js 语句的执行，而（同步）js 脚本执行会阻塞其后的 DOM 解析（所以通常会把 css 放在头部， js 放在 body 尾）

JS对页面渲染影响

JS 可以理解为解析器阻塞，当解析器遇到 script 标签时&#