前端工程师的必修课：浏览器的渲染原理 （附带面试题）

前言

在这个数字时代，我们每天都在与各式各样的网页打交道，从资讯浏览到在线购物，从社交媒体到在线学习，网页构成了互联网世界丰富多彩的界面。但你是否曾好奇过，当你轻轻一点，那些绚丽多彩的页面是如何瞬间呈现在你眼前的？今天，就让我们一同揭开浏览器渲染页面的神秘面纱，探索这个看似简单实则复杂无比的过程。

浏览器渲染的8个阶段

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。
接下来我们将分别来讲解这8个阶段。一些不重要或者不需要掌握的步骤我就尽量简单描述。

HTML解析

一切始于HTML的解析，浏览器如同一位博学的翻译家，将HTML文档逐行转化为DOM树，构建起网页的骨架。在此过程中，它前瞻性的预解析策略尤为关键——预先下载CSS与外部JS文件，为后续的高速渲染铺设道路。CSS的并行加载确保了其不会拖慢HTML解析的步伐，而JS的加载与执行则需适时暂停DOM构建，以防执行中的脚本修改尚未完全成形的结构。第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。

样式计算

紧随其后，浏览器化身时尚设计师，依据CSSOM树，为DOM树的每个节点量体裁衣，计算出确切的Computed Style。这一阶段，色彩、尺寸等属性被精确量化，为网页的个性化外观奠定了基础。这一步完成后，会得到一棵带有样式的 DOM 树。

布局

步入布局阶段，浏览器担当起了地理规划师的角色，为DOM树中的每个节点测量并分配空间，构建出布局树。这一环节巧妙地处理了可见与不可见元素，确保布局逻辑与视觉呈现的和谐统一。

分层

为了高效应对动态变化，浏览器采用分层策略，为页面的不同部分分配独立的层级。这一决策如同导演编排场景，不同元素按需分镜，既提升了动画与交互的流畅度，也为后续的高效更新预留了空间。

绘制

随后，每一层都被赋予详细的绘制指令，如同艺术家手下的草图，精细规划着每一笔色彩与形状的落点。这一过程为网页的视觉表现力奠定了扎实的基础。

分块

在绘制阶段之后，为了进一步提升渲染效率，尤其是针对复杂的网页结构和高性能的图形操作，合成线程会进行一项称为“分块”（Tile）的操作。这一策略的核心思想是将每个图层分割成多个较小的矩形区域，这些区域就是所谓的“块”。

分块的好处在于：

• 并行处理：这些小块可以被独立处理，现代浏览器和操作系统能够利用多核CPU的优势，通过线程池分配不同的线程同时处理不同的块，大大提高了绘制和光栅化过程的效率。
• 局部更新：当页面部分内容发生变化时，如滚动或动画效果，通常只需要重新渲染受影响的分块，而不是整个图层或页面，这显著减少了重绘和回流的开销。
• 减少内存使用：分块使得浏览器只须保留当前或即将可视区域的分块在内存中，对于远离视口的分块，可以延迟加载或卸载，从而节省宝贵的系统资源。

分块完成后，每个小块会被赋予一个绘制列表，记录了该区域的绘制指令和所需资源。随后，这些信息作为下一步“光栅化”的输入，将指令转换成实际像素数据，为最终呈现在屏幕上做好准备。这一系列的优化策略，确保了即便在复杂和动态变化的网页环境中，浏览器仍能保持流畅和高效的渲染性能。

光栅化

光栅化（Rasterization）是浏览器渲染流程中的一个关键技术步骤，它发生在“分块”之后，是将矢量图形或者形状描述转换为屏幕上实际像素点的过程。光栅化的主要目的是将抽象的、逻辑上的图形描述转换为具体的像素矩阵，让计算机的显卡知道如何在屏幕上展示这些内容。它是从逻辑结构到视觉表现的关键桥梁，是将网页内容从代码转化为用户可见图像的最后一步。

画

最终，经过精密计算的位图信息转化为一个个精确的“舞台指示”，指导着每一块图像在屏幕上找到自己的位置，完成从代码到视觉的华丽转身。特别是，通过GPU的直接参与，如变换这样的效果得以在合成阶段高效实现，为用户带来流畅至极的体验。

面试题

为什么 transform 的效率高？

由于 transform 属性的调整仅作用于渲染流程的最终环节——“绘制（draw）”步骤，而这一阶段发生在独立的合成线程中，因此对transform的修改几乎不对负责主要布局和绘制任务的渲染主线程造成影响。换言之，即便渲染主线程正忙于其他计算密集型操作，transform引起的视觉变化也能流畅进行，两者互不干扰。这样一来，利用transform进行的动画效果能够更加高效、流畅地呈现给用户。

什么是 reflow？

Reflow，即回流，是指浏览器中发生的一种渲染机制过程，其核心实质在于重新计算和构建布局树（Layout Tree）。当网页的某些变化影响到了元素的位置或尺寸，比如修改了DOM结构、应用了新的CSS样式或浏览器窗口尺寸调整时，浏览器就需要重新计算元素的几何属性，确保渲染的准确性。综上所述，reflow是浏览器为了响应页面变化而进行的必要但昂贵的操作，开发者在编写代码时应尽量减少触发它的机会，以提升页面的渲染性能。