浏览器是如何渲染页面的？ - 2024最新版前端秋招面试短期突击面试题

浏览器是如何渲染页面的？ - 2024最新版前端秋招面试短期突击面试题【100道】 🌐

浏览器的渲染流程是将 HTML、CSS 和 JavaScript 转换为用户可见内容的过程。以下是浏览器渲染的一系列步骤，以及每个步骤的关键过程和输入输出。

渲染流程概述 🔄

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。主线程会依次处理这些任务，开启渲染流程。

主要步骤：

1. HTML 解析
2. 样式计算
3. 布局
4. 分层
5. 绘制
6. 分块
7. 光栅化
8. 绘制到屏幕

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）」信息，确定每个位图在屏幕上的位置，同时处理变形。

输出：

• 最终在屏幕上呈现用户界面。

总结 📝

浏览器的渲染过程是一个复杂而高效的流水线，每一步都有明确的输入和输出。通过理解这些步骤，开发者可以更好地优化网页性能，提高用户体验。在面试中能够清晰地阐述这一流程的细节，将使你在技术面试中更具竞争力！希望这些知识能帮助你顺利通过面试！