浏览器的组成、渲染过程及缓存机制

浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。用户用 URI （Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置

---

浏览器的组成

        浏览器可以分为两部分，shell 和 内核。其中 shell 的种类相对比较多，内核则比较少。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分

• shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的

• 内核是浏览器的核心。内核是基于标记语言显示内容的程序或模块

 

浏览器内核的组成

        浏览器内核（也称为渲染引擎）是浏览器最核心的组件，负责将网页代码转换为用户可见的页面。其核心功能包括解析 HTML、CSS、JavaScript 等语法，并最终渲染显示内容

 

1、​渲染引擎（Rendering Engine）

        负责网页内容的解析与呈现，具体包括：

• ​HTML 解析器：将 HTML 文档转换为 DOM 树结构
• CSS 解析器：解析 CSS 样式规则并生成样式表
• 布局计算模块：结合 DOM 树和样式表，计算每个元素的尺寸和位置（即“布局”或“重排”）
• ​渲染模块：将布局结果绘制到屏幕上（即“重绘”）

 

2、JavaScript 引擎

        负责解析和执行 JavaScript 代码，实现网页的动态交互功能。例如：
        • Chrome 的 V8 引擎（基于 Blink 内核）
        • IE9+ 的 Chakra 引擎（基于 Trident 内核）
        • Firefox 的 SpiderMonkey 引擎（基于 Gecko 内核）

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎

 

常见浏览器所用内核

（1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；

（2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；

（3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；

（4） Safari 浏览器内核：Webkit 内核；

（5） Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；

（6） 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；

（7） 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；

（8） 百度浏览器、世界之窗内核：IE 内核；

（9） 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；

（10）UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。

 

浏览器的渲染过程

浏览器的渲染过程是将网页代码转换成可视化界面的复杂过程，主要包括以下几个步骤：

1. 解析 HTML：

           浏览器解析 HTML 文档，构建 DOM（Document Object Model）树。

2. 解析 CSS：

           浏览器解析 CSS 文件，构建 CSSOM（CSS Object Model）树。

3. 合并 DOM 和 CSSOM：

           将 DOM 树和 CSSOM 树合并成渲染树（Render Tree），包含所有需要渲染的节点。

4. 布局（Reflow）：

           计算渲染树中每个节点的位置和大小。

5. 绘制（Repaint）：

           将渲染树中的节点绘制到屏幕上。

6. 执行 JavaScript：

           解析和执行 JavaScript 代码，可能会修改 DOM 和 CSSOM，触发重排和重绘。

注意：

• ​JS 阻塞解析：JS 执行会暂停 HTML 解析，需通过 async/defer 优化

• ​重排（Reflow）与重绘（Repaint）​：修改布局属性（如宽高）会触发重排，仅修改颜色等属性则触发重绘。重排必然引起重绘，需通过批量操作减少触发次数

 

浏览器的缓存机制

浏览器缓存机制用于提高页面加载速度和减少网络流量，主要包括以下几种类型：

1. DNS 缓存：

   • 缓存域名与 IP 地址的映射关系，减少 DNS 查询时间。

2. 浏览器缓存：

   • 存储网页资源（如 HTML、CSS、JavaScript、图片等），分为强缓存和协商缓存。

   • 强缓存：直接使用本地缓存，无需发送 HTTP 请求。

   • 协商缓存：发送 HTTP 请求，由服务器决定是否使用本地缓存。

3. HTTP 缓存头：

   • Expires：指定资源过期时间。

   • Cache-Control：控制缓存的策略（如 max-age、no-cache 等）。

   • Last-Modified/If-Modified-Since：用于协商缓存，检查资源是否被修改。

   • ETag/If-None-Match：用于协商缓存，检查资源是否发生变化。

4. 本地存储：

   • Cookie：存储在客户端的小型数据，用于跟踪用户状态。

   • LocalStorage：长期存储数据，浏览器关闭后数据不丢失。

   • SessionStorage：会话存储数据，浏览器关闭后数据丢失。

总结：

浏览器渲染过程包括解析 HTML、解析 CSS、合并 DOM 和 CSSOM、布局、绘制和执行 JavaScript。

 

浏览器缓存机制通过 DNS 缓存、浏览器缓存、HTTP 缓存头和本地存储等方式，提高页面加载速度和减少网络流量。