浏览器是如何渲染页面的？

最新推荐文章于 2024-09-14 22:18:26 发布

斯丢匹德先森

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量87

点赞数 1

分类专栏：关于前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Richieeea/article/details/130078923

版权

9 篇文章 0 订阅

订阅专栏

文章详细阐述了浏览器从接收HTML文档开始的渲染流程，包括HTML解析、CSSOM构建、样式计算、布局、分层、绘制、分块、光栅化到最终的画阶段。解释了CSS如何不阻塞HTML解析，而JS则会阻塞的原因，以及GPU在光栅化和绘图中的作用。

摘要由CSDN通过智能技术生成

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程
整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。这样，整个渲染流程就形成了一套组织严密的生产流水线

渲染的第一步是解析 HTML

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的 JS 文件
如果主线程解析到`link`位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因
如果主线程解析到`script`位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中

这一步完成后，会得到一棵带有样式的 DOM 树

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置
大部分时候，DOM 树和布局树并非一一对应
比如`display:none`的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应