浏览器渲染进程

进程是 CPU 资源分配的最小单位，线程是 CPU 调度的最小单位。

浏览器是多进程的，浏览器的进程有：

• 浏览器主进程（可独立出网络进程）
• 第三方插件进程
• GPU进程
• 浏览器渲染进程

浏览器渲染进程内部又是多线程的：

• GUI渲染线程：负责渲染浏览器页面，解析和构建DOM、CSSOM和渲染树，绘制页面。重绘和回流也会执行。
• JS引擎线程：JS内核，解析和运行javascrpit脚本，一个标签页只有一个JS线程。JS线程跟GUI线程是互斥的。
• 事件触发线程：监听和触发事件，处理事件循环（event loop）。比如我们的click事件，JS引擎解析完click事件中的代码，会将该任务放入事件触发线程，等到事件被触发时，事件触发线程会将对应的任务放入待处理队列的队尾，等待JS引擎空闲时处理。
• 定时器触发线程：setTimeOut和setTimeInterval所在的线程。用来计时并触发事件，时间到了以后将事件放入待处理队列的队尾等待执行。所以定时器中的代码并不是准时准点执行的。
• 异步http请求线程：XMLHttpRequest链接后，浏览器新开一个线程来处理。如果状态变更，将回调函数放入待处理队列

浏览器渲染机制

浏览器渲染机制是将网页代码转换为用户可视化界面的过程，它可以分为以下五个步骤：

1. 解析 HTML，构建 DOM 树

• 浏览器首先下载 HTML 文档，并将其解析为 DOM（Document Object Model）树。DOM 树是表示网页结构的层次化数据结构，每个节点代表一个 HTML 元素。
• 解析过程中，浏览器会提取 HTML 元素的属性和文本内容，并将其存储在 DOM 树中。

2. 解析 CSS，生成 CSSOM 树

• 浏览器会下载所有关联的 CSS 样式表，并将其解析为 CSSOM（CSS Object Model）树。CSSOM 树是表示 CSS 样式信息的层次化数据结构，每个节点代表一个 CSS 规则。
• 解析过程中，浏览器会提取 CSS 规则的选择器、属性和值，并将其存储在 CSSOM 树中。

3. 合并 DOM 树和 CSSOM 树，生成 Render 树

• 浏览器会将 DOM 树和 CSSOM 树合并，生成 Render 树。Render 树是表示网页渲染信息的层次化数据结构，每个节点代表一个需要渲染的 HTML 元素。
• 合并过程中，浏览器会根据 CSS 规则计算每个元素的最终样式，并将其应用到 Render 树中。

4. 根据 Render 树进行布局

• 浏览器会根据 Render 树计算每个元素的最终位置和大小。这个过程称为布局（layout）。
• 布局过程中，浏览器会考虑元素之间的相互关系、CSS 布局属性等因素，并最终确定每个元素的最终位置和大小。

5. 调用 GPU 对渲染树进行绘制，合成图层，显示在屏幕上

• 浏览器会利用 GPU（Graphics Processing Unit）来加速渲染过程。GPU 是专门用于图形处理的硬件设备，可以显著提高渲染速度。
• 浏览器会将 Render 树拆解为多个图层，并使用 GPU 对每个图层进行绘制。

• 最后，浏览器会将所有图层合成到最终的图像上，并显示在屏幕上。

  
  
  image.png

重要概念解释:

• DOM（Document Object Model）： 文档对象模型，是表示网页结构的层次化数据结构。
• CSS（Cascading Style Sheets）： 层叠样式表，用于定义网页元素的样式。
• JavaScript： 一种客户端脚本语言，用于实现网页的交互性。
• 浏览器内核： 浏览器的核心部分，负责解析HTML、CSS和JavaScript代码，并将其渲染为用户可视化界面。
• 渲染引擎： 浏览器内核的一部分，负责将网页代码转换为用户可视化界面。
• GPU（Graphics Processing Unit）： 图形处理单元，可以加速网页的渲染速度。
• 回流（Reflow）： 当DOM树的结构发生变化时，浏览器需要重新计算元素的位置和大小，这个过程称为回流。
• 重绘（Repaint）： 当元素的外观发生变化时，浏览器需要重新绘制该元素，这个过程称为重绘。

浏览器渲染优化是指通过各种手段来提高浏览器渲染网页的速度和流畅度，从而提升用户体验。以下是一些常见的浏览器渲染优化方案：

1. 减少回流和重绘

回流和重绘是浏览器渲染过程中最耗时的操作之一，因此减少回流和重绘是提高渲染性能的关键。

• 减少DOM操作：尽量减少对DOM树的操作，例如减少DOM元素的添加和删除。
• 使用CSS选择器来优化元素的定位：使用更精确的CSS选择器来定位元素，避免不必要的回流。
• 使用离线布局（layout）和离线渲染（painting）：将需要频繁更新的元素放置在单独的DOM树中，并使用离线布局和离线渲染技术来更新这些元素，避免影响整个页面的回流和重绘。

2. 利用浏览器缓存

浏览器缓存可以将静态资源（例如HTML、CSS、JavaScript文件、图片等）存储在本地，避免每次加载页面都需要重新下载这些资源。

• 设置合理的缓存过期时间：为静态资源设置合理的缓存过期时间，可以平衡缓存利用率和资源更新频率。
• 使用版本控制：为静态资源使用版本控制，可以确保在更新资源后浏览器能够及时加载新版本。

3. 优化CSS和JavaScript代码

• 尽量减少CSS选择器的层级嵌套。
• 避免使用不必要的CSS属性。
• 合并CSS和JavaScript文件。
• 压缩CSS和JavaScript代码。

4. 使用CDN（Content Delivery Network）

CDN可以将静态资源分发到位于不同地域的服务器上，从而缩短用户加载资源的时间。

5. 优化图片

• 使用合适的图片格式。
• 压缩图片。
• 使用CSS Sprites。

6. 使用WebP格式图片

WebP是一种比JPEG和PNG更小、更有效的图片格式。

7. 延迟加载非关键内容

延迟加载是指等到用户需要查看内容时再加载该内容。这可以提高页面加载速度，尤其是对于包含大量非关键内容的页面。

8. 使用Web Worker

Web Worker是一种可以运行在单独线程中的JavaScript脚本。使用Web Worker可以将耗时的任务从主线程中分离出来，避免阻塞主线程。

9. 启用浏览器硬件加速

现代浏览器支持硬件加速，可以利用GPU来加速渲染过程。

参考链接： 图解浏览器渲染原理及流程