当你在浏览器输入网址，按下回车后，神奇的事情发生了：几秒钟内，一个完整的网页就出现在眼前。这背后是浏览器渲染进程在默默工作。今天我们就来了解这个复杂但精彩的过程。

渲染进程：浏览器里的制造工厂

可以把渲染进程想象成一个高效工厂。它接收网络进程传来的html、css和JavaScript代码，经过多道工序，最终变成我们能看见和操作的网页。

这个工厂不是单打独斗，而是由多个专业团队协作完成。

各个团队的职责

主线程：总指挥

主线程是整个流程的核心，但也是最容易堵塞的环节。它负责：

• 解析HTML代码，构建dom结构树

• 解析CSS样式，生成样式规则树

• 将DOM和样式合并成渲染树

• 计算每个元素的位置和大小（布局）

• 将页面分成不同的图层

• 生成绘制指令

• 执行JavaScript代码

需要注意的是，JavaScript引擎和主线程在同一个线程工作，所以当JavaScript执行时，其他工作都要暂停等待。

合成线程：动画专家

合成线程独立于主线程，专门负责：

• 处理动画效果

• 管理页面滚动

• 将图层分割成小块（图块）

• 安排图块的光栅化顺序

光栅线程池：批量处理团队

这是一个多线程团队，负责：

• 将矢量图形转换成位图像素

• 优先处理当前屏幕可见区域的图块

• 与GPU进程配合加速处理

Worker线程：后勤支援

Web Worker和Service Worker运行在独立线程，不会影响主线程的工作效率。

从代码到页面的七个步骤

第一步：接收数据
浏览器进程把HTML数据交给渲染进程，主线程开始解析这些代码。

第二步：解析和加载资源
在解析过程中，预加载扫描器会提前发现后续需要的资源，比如CSS、JavaScript、图片和字体文件，并提前开始下载。

这里有个重要细节：当遇到普通的script标签时，HTML解析会暂停，直到JavaScript代码下载并执行完成。

第三步：计算样式和构建渲染树
CSS文件中的样式规则被解析成CSSOM树，然后与DOM树合并，生成带样式的渲染树。

第四步：布局计算
计算渲染树中每个元素的具体位置和大小，包括处理边距、定位和溢出等情况。

第五步：图层分离
根据元素的层叠关系、transform属性、will-change属性等规则，将页面分成多个独立的图层。这就像把一幅画分成多个透明胶片，方便分别处理。

第六步：生成绘制指令
为每个图层生成详细的绘制步骤，比如先画背景，再画边框，最后画文字内容。

第七步：合成显示
合成线程将图层信息转换成图块，光栅线程将图块转换成位图，最后通过GPU进程显示在屏幕上。

这个过程以每秒60次的速度不断重复，确保页面的流畅显示。

为什么有些动画很流畅，有些会卡顿？

流畅的动画

当你只修改transform或opacity属性时，合成线程可以独立完成工作，不需要主线程参与。这样就能保证动画的流畅性。

卡顿的动画

如果你修改了width、height、color等属性，就需要主线程重新计算布局和样式。这时候如果主线程正在处理其他任务，动画就会出现卡顿。

JavaScript的执行时机

浏览器每帧的工作顺序是：先执行微任务，然后处理动画回调，最后执行其他任务。如果JavaScript代码执行时间过长，就会占用下一帧的工作时间，导致页面卡顿。

优化建议

1. 尽量使用transform和opacity来实现动画效果

2. 避免在JavaScript中进行复杂的计算

3. 将长时间运行的任务分成小块执行

4. 使用Web Worker处理复杂计算

完整的时间线

从输入网址到页面显示，经历了这些步骤：URL请求 → 接收数据 → 解析HTML → 下载资源 → 构建DOM和样式 → 生成渲染树 → 布局计算 → 图层分离 → 生成绘制指令 → 合成显示 → GPU渲染。

总结理解

可以这样比喻：主线程负责设计整个页面结构，合成线程负责管理显示区域，光栅线程负责准备显示材料，GPU负责最终显示。只要不让JavaScript长时间占用主线程，就能保证页面的流畅体验。

理解浏览器的渲染原理，有助于我们写出性能更好的网页代码。下次开发时，不妨多思考一下你的代码在浏览器中是如何工作的。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13165