浏览器输入url到页面呈现的过程

• 浏览器由url获取到html文档

1.浏览器由url解析出主机名
2.浏览器由主机名查找到IP地址（先查找本地DNS缓存，没有的话，通过浏览器默认的DNS服务器发起查询请求并缓存）。
3.由url解析出端口号。
4.浏览器向服务器建立TCP连接。
5.浏览器向服务器发送HTTP请求报文。
6.服务器向浏览器发送HTTP响应报文。
7.TCP连接断开。
8.浏览器已获取到html文档并解析

• 浏览器渲染页面

1.生成dom tree

浏览器将html文档抽象成dom tree（html结构本来就为树形结构）。

2.生成stylesheets

整合各种来源的css样式，并生成渲染进程可识别的stylesheets，并将stylesheets中的单位标准化（如'red'、'rem')。

3.样式计算

根据之前得到的stylesheets计算出各个dom节点的具体样式，需要用到css继承、层叠。

4.布局

根据dom tree中所有可见元素构建出一颗新树，称为布局树。计算出各个节点的几何坐标信息，并保存在布局树中。

5.分层

• 页面中有复杂的3D变换、页面滚动、z轴排序时，会为特定的节点创建新的图层（layer），并生成图层树（layer tree）。各个图层叠加呈现出最终的页面。

会产生分层的元素

• 拥有层叠上下文属性的元素：如明确定位属性的元素、定义透明属性的元素、使用 CSS 滤镜的元素等。
• 需要剪裁的地方：也就是内容大小超出容器大小，如文本溢出、进度条。

6.图层绘制

完成图层构建后，进行图层绘制。将一个图层的绘制拆分为多个绘制指令，按顺序保存为绘制列表。

7.栅格化操作（raster）

• 之前所得到的绘制列表会传入给合成线程，在合成线程中进行栅格化。
• 将一个图层划分为多个特定大小的图块。
• 根据图块生成位图，优先生成视口附近的图块。
• 该过程会调用GPU进程生成位图，并保存在内存中。

8.显示

最后将内存显示在屏幕上。

重要概念

重排

当改变元素的几何属性时，位置会变化。需要重新计算节点样式属性，并执行后续所有渲染流程。极大的影响性能。

重绘

当改变元素的绘制属性时，会重新计算样式，跳过布局和分层，执行后续渲染流程。

直接合成

当调用transform方法时，会引发合成，执行绘制之后的流程。