浏览器解析页面流程
从输入一个url到页面解析完成的流程
1. 网络进程
1. 获取url
- 浏览器首先判断输入的url是否有http缓存，如果有则直接从http缓存中读取数据并显示。如果没有，则进行下一步。
- 进行DNS解析，获取域名对应的IP地址。
2.下载html文件
- 浏览器根据IP地址和端口号与web服务器建立TCP连接，三次握手。
- 浏览器向web服务器发送HTTP请求，请求获取html文件。服务器返回html文件。
2. 渲染进程
1.解析html文件 生成dom树
- 解鞋html文件，并构造DOM树。边解析边构造。
- 在线解析开始时就会将link标签通过预解析线程来下载，dom解析到link标签时会将link标签的href属性值添加到预解析队列中。最终这些下载好的css会由主线程解析为cssom对象。
- dom树解析遇到script标签时，默认会暂停一下解析，先执行js脚本。等js脚本执行完成后再继续解析。如果script标签中设置了defer或者async属性，则不会暂停解析。
2.解析css文件生成cssom树
- 浏览器会先下载css文件，并构造cssom对象。
- cssom对象中包含选择器、属性、值等。
- 注意，cssom根节点下会挂载所有的 css样式表（比如内联样式表，默认样式鼠标，外部样式表）
3.生成渲染树
- 遍历dom树，将所有可见的节点添加到渲染树中。
- 遍历cssom树，找到与渲染树中的节点对应的样式规则。
- 生成渲染树中的每个节点的视觉信息。
4. 布局（Layout）
- 浏览器根据渲染树和cssom树，计算出每个节点的视觉信息。
- 根据视口的大小，计算出需要显示的节点。
- 布局树中每一个元素都是一个C++对象，布局树中每一个节点都包含一个位置信息。
5.分层(Layer)
- 将渲染树中的节点分成不同的层。
- 跟堆叠上下文有关的属性都会影响分层。比如z-index
6.绘制(Point)
- 遍历分层树，将每个节点绘制到屏幕上。
- canvas本质上就是在这个环节进行绘制的。
- 绘制的过程就是一条一条的绘制指令。
- 渲染主线程的工作完毕
7. 分块(Tiling) - 合成线程
- 浏览器会将绘每一层分为很多小区域，然后分块进行绘制。
- 启动多个线程同时完成工作
8. 光栅化（Raster） - GPU 进程运算
- 合成线程将分块后的图，进行光栅化操作生成位图
- 优先处理视口内的图块
- 生成的位图会交给合成线程
9. 合成显示
- 合成线程将多个位图合成为一张完整的图片信息，由合成线程交给GPU进程，再经GPU价交给显卡，最终显示在屏幕上。
- 由于合成线程与渲染主线程一样在浏览器的渲染进程中，并且渲染进程是一个独立的沙盒状态，所以合成线程无法直接将信息传递到显卡，因此合成线程需要将位图信息传递给GPU进程，由GPU进程传递。
- transform所有的效果均在这一步实现，由位图在GPU中进行计算变换。
原文地址：https://blog.csdn.net/2301_76380626/article/details/144298568
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！