浏览器工作原理

浏览器的内核是浏览器最核心的部分，负责对网页语法的解释并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

浏览器引擎内还包含一个 JavaScript 引擎，其中最为出名的就是 V8 引擎，JavaScript 引擎无需解析 DOM 之类的内容，因此 V8 引擎也被用于 Node.js 的运行时系统中。

参考资料：

构建 DOM 树

浏览器开始解析 HTML 文件，将标记（标签）转换成浏览器能理解的结构，即 DOM 树。DOM 树是HTML页面的对象表示，表现为节点和对象的层次结构。

DOM Tree

构建 CSSOM 树

浏览器需要将 CSS 代码 (内联、外链或嵌入)被解析成 CSSOM（CSS对象模型）。

合并 DOM 和 CSSOM 构建渲染树

渲染树（Render Tree）是DOM和CSSOM合并后的产物，它只包含渲染页面所需的节点，并带有相应的样式信息。

渲染页面

一旦渲染树被创建，浏览器会进行布局（或回流），这一步骤确定每个节点的确切位置和大小。这通常涉及到计算每个元素的视口内的确切位置和大小。

绘制是渲染过程的下一步，涉及填充像素的具体操作。它包括绘制文本、颜色、图像、边框、阴影等。

如果页面包含复杂的视觉效果，如层叠、滤镜、透明度等，浏览器会在多个层上进行渲染，然后将它们合成在一起，形成最终的屏幕图像。

DOM Tree Render

参考资料：

谷歌浏览器（Google Chrome）是一个多进程、多线程的网络浏览器。

多进程架构

主进程/浏览器进程（Browser Process）
- 负责管理浏览器的用户界面（UI），包括地址栏、书签栏、前进/后退按钮等。
- 它还负责协调其他进程，例如创建和销毁标签页进程、插件进程等。
- 此外，浏览器进程还处理文件的下载和磁盘缓存。
渲染进程（Renderer Process）
- 每个标签页通常都有其自己的渲染进程，渲染进程负责处理 HTML、CSS、JavaScript 等网页内容的解析和展示。
插件进程（Plugin Process）
- 用于独立运行插件内容，如 Adobe Flash Player（注：Adobe Flash Player 已被废弃）。
- 这样可以保证插件崩溃不会影响浏览器或其他网页的正常运行。
GPU 进程
- 用于处理 GPU 相关任务，如 CSS 动画和视频播放的硬件加速。
- 将这些任务单独放在一个进程中可以提高性能并降低浏览器崩溃的风险。

多线程架构

在每个渲染进程内部，Chrome 使用了多线程来进一步提高效率：

主线程（Main Thread）
- 解析 HTML、构建 DOM 树、执行 JavaScript、计算 CSS 样式、布局和绘制等。
- 这是最关键的线程，JavaScript 的执行也在这个线程中，因此任何长时间执行的 JavaScript 代码都可能阻塞页面渲染。
合成线程（Compositor Thread）
- 用于页面的合成，生成页面的位图，并将其发送到 GPU 进程。
- 独立于主线程，可以提高滚动和动画的流畅性，防止界面卡顿。
工作线程（Worker Threads）
- 支持 Web Workers，允许 JavaScript 创建多个线程，执行任务不会阻塞主线程。
光栅化线程（Raster Threads）
- 用于将图像和其他复杂的视觉元素转换成屏幕上的像素，这一过程称为光栅化。
- 这些线程在背景中运行，加速页面加载和复杂图形的显示。

# 浏览器工作原理