HTML/CSS/JS 是如何在浏览器中渲染成你看到的页面？【图解Chrome】

Chrome 算是程序员的标配了，从全球的市场份额来看，它在全球市场的份额已经超过 60%。

在 Chrome 10 周年之际，官方发布了一个系列文章，用图解的方式，很清晰的讲解了现代浏览器的运行原理。

渲染器进程涉及到 WEB 性能相关的多个方面，由于渲染器进程中处理了很多的逻辑，不是一篇文章可以全面讲解的，因此本文仅作为一个概述。如果你有兴趣深入研究，可以在《Why PerfORMance Matters》这篇文章里找到更多的资料。

渲染器进程处理Web内容

所有选项卡内发生的逻辑，都由渲染器进程负责。在渲染器进程中，主线程处理了服务器发送给用户的大部分代码。如果你使用到 Web Workder 或者Service Worker，那 javascript 中的这部分代码，将由工作线程处理。Compositor（合成器） 和 Raster（光栅） 线程也在渲染器内运行，从而实现高效、流畅的渲染页面。

渲染器进程的核心工作是将 html，CSS 和 JavaScript 转换为用户可以与之交互的网页。

image.png