重新认识浏览器的渲染过程
2026-10-25 19:27:20
重新认识浏览器的渲染过程
浏览器的渲染过程是一个复杂而精细的系统工程，它涉及多个线程和多个阶段的处理。以下是对浏览器渲染过程的重新认识，包括渲染进程、页面渲染过程等关键内容。
一、浏览器的渲染进程
浏览器是一个多进程的应用程序，它包含多个进程，如Browser进程（主线程）、渲染进程、GPU进程和插件进程等。其中，渲染进程与前端工作息息相关，它负责页面的渲染和显示。
渲染进程内部又划分了多个线程，主要包括：
- GUI线程：负责渲染页面。解析HTML和CSS，构建DOM树、CSSOM树和Render树，以及绘制布局和页面内容的过程都在这个线程中进行。当界面需要重绘或重排时，会执行该线程。
- JS引擎线程：负责解析并运行JavaScript代码。它与GUI线程是互斥的，即当JavaScript代码执行时，会阻塞页面渲染。因此，通常建议将JavaScript代码放在页面底部执行，以减少对页面渲染的影响。
- 事件触发线程：负责控制事件循环，即event loop。在事件触发时，会将对应的事件添加到处理队列的尾部，等待JavaScript引擎处理。
- 计时器触发线程：负责计时功能。计时完毕后，将事件添加到事件队列中，等待JavaScript引擎处理。
- 异步HTTP请求线程：在XMLHttpRequest连接后，浏览器会创建一个异步请求线程来监测请求的状态变更。当请求完成时，会将结果添加到事件队列中，等待JavaScript引擎处理。
二、页面渲染过程
页面渲染过程是一个从HTML和CSS解析到页面内容显示的过程，主要包括以下几个阶段：
解析HTML和CSS
HTML解析过程是一个深度遍历的过程。浏览器会遍历一个节点下的所有子节点，然后才会开始解析下一个兄弟节点。最终，浏览器会构建出一个DOM树，表示页面的结构。
CSS同样也会进行解析，并构建成为CSSOM树。CSSOM树表示页面的样式信息。
构建Render树
浏览器会拿着已经构建好的DOM和CSSOM来构建一个新的树，称之为Render树。Render树是页面内容的可视化表示，它包含了页面中所有可见元素的布局和样式信息。
在构建Render树的过程中，会筛选掉那些不可视的元素，如含有“display: none”的元素。同时，脱离文档流的元素在Render树和DOM树中的位置也不尽相同。因此，Render树和DOM树并不是一一对应的，但它们之间有着对应关系。
布局和绘制
在这个阶段，Render树的节点还没有位置和大小信息。计算元素的位置和大小的过程称之为布局（Layout）。布局完成后，Render树的节点就具有了确切的位置和大小信息。
接下来，浏览器会根据Render树的内容进行绘制（Paint）。绘制过程是将页面内容绘制在浏览器上的过程。这个过程比较消耗性能，因此浏览器会尽量用最小的响应来应对元素的变化。
当元素的颜色发生变化时，并不会引起重新布局，而只是重新绘制而已。但是，当DOM节点发生较大的变化时，会引发重新布局和重新绘制，即重排（Reflow）或回流。重排是一个比较耗时的过程，因为它需要重新计算所有受影响元素的位置和大小。
以下是webkit的渲染线程流程图，展示了浏览器渲染过程的主要阶段：
结语
通过重新认识浏览器的渲染过程，我们可以更加深入地理解页面是如何在浏览器中呈现出来的。同时，也为我们优化页面性能提供了重要的依据。例如，为了减少重排和重绘带来的性能问题，各大前端框架都采用了虚拟DOM技术。虚拟DOM可以模拟DOM树的结构和变化，并在内存中计算出最优的DOM更新策略，从而减少实际的DOM操作次数，提高页面性能。
热门标签
