浏览器
大约 3 分钟
浏览器
浏览器解析
1. 请求网页
- 发送请求：浏览器通过 HTTP/HTTPS 协议向服务器发送请求，请求指定的网页资源。
- 接收响应：服务器处理请求并返回网页内容（如 HTML、CSS、JavaScript、图片等）。
2. 解析 HTML
- 构建 DOM 树：浏览器解析 HTML 文档，将其转换为 DOM（文档对象模型）树。DOM 树是表示网页结构的树状结构，包含所有的 HTML 元素和文本节点。
- 处理文档类型：根据文档类型声明（如
<!DOCTYPE html>），确定解析模式（标准模式或怪异模式）。
3. 解析 CSS
- 构建 CSSOM 树：浏览器解析 CSS 样式表，将其转换为 CSSOM（CSS 对象模型）树。CSSOM 树包含所有的 CSS 规则和样式信息。
- 应用样式：将 CSSOM 树中的样式信息应用到 DOM 树上，为每个 DOM 节点计算样式。
4. 构建渲染树
- 生成渲染树：结合 DOM 树和 CSSOM 树，生成渲染树。渲染树包含了需要绘制的可视化内容，排除了一些不可见的内容（如
display: none的元素）。 - 计算布局：为渲染树中的每个元素计算位置和大小，生成布局信息。这一过程被称为“回流”或“重排”。
5. 绘制
- 绘制内容：根据布局信息，将渲染树中的元素绘制到屏幕上。这一过程将视觉效果（如颜色、边框、阴影等）应用到页面元素。
6. 执行 JavaScript
- 解析和执行：浏览器解析并执行 JavaScript 代码。JavaScript 代码可能会修改 DOM 树、CSSOM 树，或者触发事件。
- 更新渲染：JavaScript 修改页面内容后，可能需要重新计算布局和绘制，称为“重绘”和“重排”。
7. 处理异步操作
- 异步加载：浏览器可以异步加载资源（如图片、脚本、样式表）以提高页面性能。
- 事件处理：浏览器处理用户交互和事件（如点击、滚动、键盘输入），并相应地更新页面内容。
8. 缓存
- 缓存机制：浏览器缓存静态资源（如 CSS、JavaScript、图片），以减少重复请求，加快页面加载速度。
- 缓存控制：使用 HTTP 缓存头（如
Cache-Control、Expires）管理缓存策略，确保最新内容的加载。
9. 性能优化
- 优化渲染：浏览器引擎使用各种优化技术（如合成层、GPU 加速）提升页面渲染性能。
- 异步任务：通过 Web Workers 和异步 JavaScript 操作，避免主线程阻塞，提高用户体验。
主流浏览器内核
1. Blink
- 简介：Blink 是 Google 开发的开源渲染引擎。它是 WebKit 的一个分支。
- 主要浏览器：
- Google Chrome： google.com/chrome
- Microsoft Edge（基于 Chromium）： microsoft.com/edge
- Opera： opera.com
2. WebKit
- 简介：WebKit 是 Apple 开发的开源渲染引擎，最初由 KDE 项目开发。
- 主要浏览器：
- Safari： apple.com/safari
- 旧版 Android 浏览器：（部分 Android 版本中使用）
3. Gecko
- 简介：Gecko 是 Mozilla 开发的开源渲染引擎。
- 主要浏览器：
- Mozilla Firefox： mozilla.org/firefox
- Thunderbird（Mozilla 的邮件客户端）： mozilla.org/thunderbird
4. Trident
- 简介：Trident 是 Microsoft 开发的渲染引擎，用于旧版 Internet Explorer 浏览器。
- 主要浏览器：
- Internet Explorer： support.microsoft.com/internet-explorer
5. EdgeHTML
- 简介：EdgeHTML 是 Microsoft 为新版 Edge 浏览器开发的渲染引擎，已被 Blink 替代。
- 主要浏览器：
- 旧版 Microsoft Edge： microsoft.com/edge
6. Presto
- 简介：Presto 是 Opera Software 开发的渲染引擎，已被 Blink 替代。
- 主要浏览器：
- 旧版 Opera 浏览器： opera.com
7. Servo
- 简介：Servo 是 Mozilla 和多家机构合作开发的实验性渲染引擎，采用 Rust 编程语言编写。
- 主要浏览器：
- 目前没有主流浏览器使用，但作为实验性项目正在开发中： servo.org