渲染

渲染

一．渲染流程有四个主要步骤：

1. 解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树
2. 构建CSSOM树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树
3. 构建Render树 - 根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，
4. 布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
5. 绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来

二．一些细节：

回流(reflow)：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。

重绘(repaint)：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

三．阻塞：

关键渲染路径: 浏览器将HTML，CSS，JavaScript转换为屏幕上所呈现的实际像素，这期间所经历的一系列步骤，叫做关键渲染路径（Critical Rendering Path）。（上面的五步）

关键渲染路径共分五个步骤。构建DOM -> 构建CSSOM -> 构建渲染树 -> 布局 -> 绘制。

CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。

通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个 script 标签时，DOM构建将暂停，直至脚本完成执行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS。

四．优化阻塞

三种因素分别是：

(1) 关键资源的数量
关键资源指的是那些可以阻塞页面首次渲染的资源。

(2) 关键路径的长度
关键路径的长度指的是关键渲染路径的总耗时。

(3) 关键字节的数量
关键字节的数量指的是关键资源的字节大小，

所有优化关键渲染路径的方法，都是在优化以上三种因素。因为只有这三种因素可以影响关键渲染路径。