浏览器是如何渲染页面的？ - 2024最新版前端秋招面试短期突击面试题
浏览器是如何渲染页面的？ - 2024最新版前端秋招面试短期突击面试题【100道】 🌐
浏览器的渲染流程是将 HTML、CSS 和 JavaScript 转换为用户可见内容的过程。以下是浏览器渲染的一系列步骤，以及每个步骤的关键过程和输入输出。
渲染流程概述 🔄
当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。主线程会依次处理这些任务，开启渲染流程。
主要步骤：
- HTML 解析
- 样式计算
- 布局
- 分层
- 绘制
- 分块
- 光栅化
- 绘制到屏幕
1. HTML 解析 📖
- 过程：
- 浏览器解析 HTML 文档，构建 DOM 树。
- 遇到
<link>标签时，启动预解析线程下载外部 CSS 文件，解析 CSS 不会阻塞 HTML。 - 遇到
<script>标签时，停止 HTML 解析，等待 JS 加载和执行，因为 JS 可能会修改 DOM。
输出：
- 生成 DOM 树。
2. 样式计算 🎨
- 过程：
- 主线程遍历 DOM 树，计算每个节点的最终样式，生成 CSSOM 树（CSS 规则对象模型）。
- 计算过程中，默认样式、内部样式、外部样式和行内样式都会被纳入考虑。
输出：
- 生成带有样式的 DOM 树（结合 CSSOM）。
3. 布局 📏
- 过程：
- 根据带有样式的 DOM 树，计算每个节点的几何信息（如宽高、位置等），生成布局树。
- 有些节点（如
display: none的节点）不会出现在布局树中。
输出：
- 生成布局树。
4. 分层 📊
- 过程：
- 主线程使用策略对布局树进行分层，决定哪些元素需要单独处理。
- 分层的好处在于，某层的变化只需重新处理该层，提高效率。
影响因素：
- 样式如滚动条、堆叠上下文、
transform、opacity等都会影响分层结果。
输出：
- 生成多个图层。
5. 绘制 🖌️
- 过程：
- 为每个层生成绘制指令集，描述该层的内容如何绘制。
输出：
- 生成绘制指令。
6. 分块 🗂️
- 过程：
- 合成线程对每个图层进行分块，将其划分为更小的区域，以提高处理效率。
- 多线程加速分块处理。
输出：
- 生成更小的块信息。
7. 光栅化 🖼️
- 过程：
- 合成线程将块信息交给 GPU 进程进行光栅化。
- GPU 处理光栅化时，优先处理接近视口的区域，确保用户看到的内容更快呈现。
输出：
- 生成位图。
8. 绘制到屏幕 🖥️
- 过程：
- 合成线程拿到每个层的位图，通过生成的「指引（quad）」信息，确定每个位图在屏幕上的位置，同时处理变形。
输出：
- 最终在屏幕上呈现用户界面。
总结 📝
浏览器的渲染过程是一个复杂而高效的流水线，每一步都有明确的输入和输出。通过理解这些步骤，开发者可以更好地优化网页性能，提高用户体验。在面试中能够清晰地阐述这一流程的细节，将使你在技术面试中更具竞争力！希望这些知识能帮助你顺利通过面试！