浏览器解析页面流程

从输入一个url到页面解析完成的流程

1. 网络进程

1. 获取url

1. 浏览器首先判断输入的url是否有http缓存，如果有则直接从http缓存中读取数据并显示。如果没有，则进行下一步。
2. 进行DNS解析，获取域名对应的IP地址。

2.下载html文件

1. 浏览器根据IP地址和端口号与web服务器建立TCP连接，三次握手。
2. 浏览器向web服务器发送HTTP请求，请求获取html文件。服务器返回html文件。

2. 渲染进程

1.解析html文件 生成dom树

1. 解鞋html文件，并构造DOM树。边解析边构造。
2. 在线解析开始时就会将link标签通过预解析线程来下载，dom解析到link标签时会将link标签的href属性值添加到预解析队列中。最终这些下载好的css会由主线程解析为cssom对象。
3. dom树解析遇到script标签时，默认会暂停一下解析，先执行js脚本。等js脚本执行完成后再继续解析。如果script标签中设置了defer或者async属性，则不会暂停解析。

2.解析css文件生成cssom树

1. 浏览器会先下载css文件，并构造cssom对象。
2. cssom对象中包含选择器、属性、值等。
3. 注意，cssom根节点下会挂载所有的 css样式表（比如内联样式表，默认样式鼠标，外部样式表）

3.生成渲染树

1. 遍历dom树，将所有可见的节点添加到渲染树中。
2. 遍历cssom树，找到与渲染树中的节点对应的样式规则。
3. 生成渲染树中的每个节点的视觉信息。

4. 布局（Layout）

1. 浏览器根据渲染树和cssom树，计算出每个节点的视觉信息。
2. 根据视口的大小，计算出需要显示的节点。
3. 布局树中每一个元素都是一个C++对象，布局树中每一个节点都包含一个位置信息。

5.分层(Layer)

1. 将渲染树中的节点分成不同的层。
2. 跟堆叠上下文有关的属性都会影响分层。比如z-index

6.绘制(Point)

1. 遍历分层树，将每个节点绘制到屏幕上。
2. canvas本质上就是在这个环节进行绘制的。
3. 绘制的过程就是一条一条的绘制指令。
4. 渲染主线程的工作完毕

7. 分块(Tiling) - 合成线程

1. 浏览器会将绘每一层分为很多小区域，然后分块进行绘制。
2. 启动多个线程同时完成工作

8. 光栅化（Raster） - GPU 进程运算

1. 合成线程将分块后的图，进行光栅化操作生成位图
2. 优先处理视口内的图块
3. 生成的位图会交给合成线程

9. 合成显示

1. 合成线程将多个位图合成为一张完整的图片信息，由合成线程交给GPU进程，再经GPU价交给显卡，最终显示在屏幕上。
2. 由于合成线程与渲染主线程一样在浏览器的渲染进程中，并且渲染进程是一个独立的沙盒状态，所以合成线程无法直接将信息传递到显卡，因此合成线程需要将位图信息传递给GPU进程，由GPU进程传递。
3. transform所有的效果均在这一步实现，由位图在GPU中进行计算变换。