2024-10-08 11:35:33 +08:00
---
title: Chrome
description: Google Chrome 浏览器自2008年发布以来， ， ， ， ，
keywords:
- Chrome
- Chromium
- 浏览器
- 多进程架构
- 扩展程序
- PWA
- WebAssembly
tags:
2024-10-14 16:48:38 +08:00
- FormalSciences/ComputerScience
2024-10-08 11:35:33 +08:00
- WebDev/Browser
author: 仲平
date: 2024-09-30
---
## Chrome
### 概述与特点
#### 诞生背景
Google Chrome 浏览器首次发布于 2008 年 9 月，是由 Google 开发的一款免费网络浏览器。其设计初衷是为了提供更快速、稳定和安全的浏览体验。Chrome 的开发基于开源项目**Chromium**， ， ，
#### 核心特性
- **速度**：
- **简洁的用户界面**： ， ，
- **多进程架构**：
- **扩展支持**： ， ，
- **跨平台兼容**：
- **同步功能**：
#### 市场份额
**根据多项权威的市场分析报告， ，
### Chrome 与 Chromium 的关系
#### Chromium 项目
**Chromium 是 Google 主导的一个开源浏览器项目，
#### 其他基于 Chromium 的浏览器
许多现代浏览器都基于 Chromium 项目进行开发，利用其强大的渲染引擎和底层技术。这些浏览器在保留了 Chromium 的性能和安全特性的同时，根据各自的需求对功能和界面进行了定制。其中较为知名的浏览器包括：
- **Microsoft Edge**：在转向 Chromium 内核后，
- **Opera**： ， ，
- **Brave**： ， ， （ ） ，
这种基于 Chromium 的浏览器生态系统的繁荣，进一步验证了 Chromium 项目的开放性和强大的技术基础。尽管这些浏览器在用户体验和功能集成方面各有特色，但它们共享了 Chromium 的核心技术，确保了与现代网页标准的兼容性和良好的性能表现。
## Chrome 历史发展
### Chrome 的发布与早期发展（ ）
#### 首次发布
Google Chrome 于 2008 年 9 月推出了第一个测试版，首次发布仅支持 Windows 平台。Chrome 的推出引发了广泛关注，它标志着 Google 进军浏览器市场的开始。与当时主流的浏览器（如 Internet Explorer 和 Firefox） ，
#### 开源项目 Chromium
与 Chrome 发布同步，
Chrome 的独特架构也为浏览器带来了显著的性能提升，特别是**独立标签页崩溃保护**。通过多进程模型，
#### 市场影响
发布后不久， ， ， ，
### Chrome 的快速迭代与功能扩展（ ）
#### 引入扩展支持
2010 年，
#### 跨平台支持
Chrome 的成功不仅局限于 Windows 平台。2010 年， ， ，
#### Chrome Web Store 的发布
2011 年，
#### 浏览器性能的持续提升
随着网络应用复杂性的不断提高，
### Chrome 的现代化演变（
#### Material Design 风格引入
2016 年，
#### 对 HTTP 的安全改进
Google 一直致力于提高 Web 的安全性。自 2017 年起，
#### 逐步淘汰 Flash
Chrome 对**Adobe Flash**的支持逐步减少，并最终于 2020 年完全停止支持。这一决定反映了 Web 技术的演变趋势， ，
#### Chrome DevTools 的扩展与强化
Chrome 不仅作为用户浏览器表现卓越，作为开发工具也同样功能强大。**Chrome DevTools**随着时间的推移不断扩展，增加了对前端开发者至关重要的功能，如**JavaScript 调试**、**网络请求分析**、**性能监控**以及**渐进式 Web 应用（ ）
#### 移动端的持续扩展与优化
随着移动互联网的兴起，
#### 持续的性能优化与创新
Chrome 通过不断引入新技术和优化现有功能，保持了其在浏览器市场的技术领先地位。例如，**内存管理优化**和**标签页冻结**功能， ，
## Chrome 的架构
### 多进程架构的概述
**Chrome 的多进程架构设计是其性能、稳定性和安全性的重要基石。** 与传统的单进程浏览器模型不同， ， ，
- **浏览器进程**： ， （ ） （ ）
- **渲染进程**：每个标签页都会有一个独立的渲染进程，负责渲染页面内容。渲染进程处理 HTML、CSS 解析、JavaScript 执行和页面布局等任务。为了保证安全，渲染进程通常在**沙盒**中运行，这意味着它被隔离在一个有限的权限环境中，无法直接访问操作系统的关键资源，防止恶意网页或代码对系统造成破坏。
- **GPU 进程**： ） ，
- **插件进程**：
- **扩展进程**：
### 多进程架构的优缺点
**优点**
- **稳定性**：
- **安全性**：
- **并行处理**：多进程架构允许 Chrome 更好地利用现代多核 CPU。由于多个进程可以并发执行，
**缺点**
- 内存占用较高：由于每个进程都有自己的独立内存空间，多进程架构导致了内存使用的显著增加。尤其是在同时打开多个标签页时，每个标签页分配一个独立的渲染进程会占用更多的内存资源。虽然多进程模型带来了稳定性和安全性，但相对于单进程浏览器，它对系统的内存消耗更大。
### 沙盒安全模型
**沙盒模型**是 Chrome 实现浏览器安全的重要机制之一。它通过将渲染进程置于受限环境中，减少了恶意网页对系统的潜在威胁。
- **渲染进程沙盒**：
- **进程间通信（ ） ： （ ）
## Chrome 的渲染机制
### 从输入 URL 到页面渲染的详细过程
当用户在浏览器地址栏中输入 URL 并按下回车键时，浏览器将开始一系列复杂的过程，从网络请求到页面渲染完成。下面是详细的步骤说明：
#### 浏览器请求阶段
- **DNS 解析**：浏览器首先通过 DNS（ ）
- **建立连接**：获取 IP 地址后，浏览器与服务器建立 TCP 连接。如果是 HTTPS 请求，还需进行**TLS 握手**来加密通信。通常，
- **发送 HTTP 请求**：连接建立后，浏览器会发起 HTTP 请求，请求的内容包括 HTML 文档及其引用的资源（如 CSS、JavaScript、图片等）
- **接收响应**：服务器处理请求后，返回 HTTP 响应，其中包含了请求的 HTML 文档和其他资源的 URL。浏览器根据这些资源的类型进一步请求它们，
#### 渲染流程概述
浏览器接收到 HTML 文档和其他资源后，开始进入渲染流程，即将网络传输的字节转换为屏幕上可见的内容。该过程包括以下几个阶段：
- **解析 HTML 生成 DOM 树**：浏览器解析 HTML 文档并逐步生成**DOM 树**（ ）
- **解析 CSS 生成 CSSOM 树**：浏览器解析外部和内联的 CSS 样式，生成**CSSOM 树**（ ）
- **合成渲染树**：浏览器将**DOM 树**和**CSSOM 树**结合起来生成**渲染树**（ ） ， `<head>` 标签或带有 `display: none` 样式的元素不会被包括在内。
- **布局（ ）
- **绘制（ ）
- **合成与图层管理（ ）
### Chrome 的 Blink 渲染引擎
#### Blink 引擎概述
**Blink**是 Google Chrome 使用的渲染引擎，它是从 WebKit 渲染引擎的一个分支，专门用于处理 HTML、CSS、JavaScript 等 Web 内容，
#### 渲染树的生成与作用
- **渲染树生成**：
- **渲染树的作用**： ，
#### 合成器线程（ ）
为了提高渲染性能，
### V8 JavaScript 引擎
**V8**是 Chrome 中的 JavaScript 引擎，负责将 JavaScript 代码转换为机器码并执行。作为一款高性能引擎，
#### 即时编译（ ， ）
V8 采用了**即时编译**（ ） ， ，
#### 垃圾回收机制
V8 通过**分代式垃圾回收**（ ） ， ， ， ，
## Chrome 的性能优化
优化 Chrome 浏览器中的页面性能和网络性能是提升用户体验和提高应用响应速度的关键。在现代 Web 开发中，合理管理关键渲染路径、减少不必要的 DOM 操作、以及充分利用网络协议和缓存机制，能够显著提高 Web 应用的整体表现。
### 页面性能优化
**页面性能优化的核心在于减少渲染的阻塞、减少 DOM 操作的开销，以及最大限度地优化资源加载和渲染流程。**
#### 关键渲染路径优化
**关键渲染路径**（ ）
- **减少阻塞资源**： `<link rel="preload">` 预加载关键资源，减少首次渲染时间。
- **异步加载 JavaScript**：使用 `async` 或 `defer` 属性加载 JavaScript 文件。`async` 属性允许脚本并行下载并尽快执行，而 `defer` 则在 HTML 解析完成后才执行脚本，避免阻塞页面的渲染。
```javascript
< script src = "script.js" async > < / script >
< script src = "deferred.js" defer > < / script >
```
- **CSS 优化**：将关键的 CSS 直接内联到 HTML 文件中，减少渲染的阻塞时间。对于非关键 CSS 文件，使用 `media` 属性延迟其加载。
```html
< link rel = "stylesheet" href = "style.css" media = "print" onload = "this.media='all'" >
```
#### 减少重绘与回流
- **重绘（ ）
- **回流（ ）
优化策略：
- **减少 DOM 操作**：频繁修改 DOM 会引发回流。应尽量避免多次操作 DOM， `DocumentFragment` 来集中处理多次 DOM 修改，最后一次性插入页面。
- **避免触发回流属性**：访问或修改像 `offsetWidth` 、`offsetHeight`、`scrollTop` 等属性会强制触发浏览器的回流。将这些操作集中到一个步骤中，避免在同一循环中反复读取和修改布局属性。
- **CSS 优化**：将影响性能的动画限制在 `transform` 和 `opacity` 上，这样可以避免触发回流。
### 网络性能优化
网络优化是页面快速加载的另一个重要环节，优化网络请求的数量和质量能够显著加快页面的初次渲染。
#### HTTP/2 与 HTTP/3 的使用
- **HTTP/2**：通过**多路复用**技术， ， ，
- **HTTP/3**：基于 UDP 协议的 HTTP/3，
#### CDN 和缓存优化
- **CDN（ ） ， ， ，
- **缓存策略**：合理利用浏览器缓存能够极大提升页面加载性能。通过配置 `Cache-Control` 和 `ETag` 等 HTTP 头部，可以控制资源的缓存时间和验证机制，避免重复下载未更改的资源。
- **`Cache-Control`**：设置资源的缓存有效期，例如使用 `max-age` 指定资源在多少秒内有效。
- **`ETag`**：利用 ETag 头部标识资源的版本，当资源没有变化时，服务器可以返回 304 状态码，告知浏览器使用本地缓存，减少网络带宽的消耗。
```html
Cache-Control: max-age=31536000, public
ETag: "abc123"
```
#### Lazy Load 技术
**懒加载（ ）
- **图片懒加载**：在现代浏览器中，可以通过为 `<img>` 标签添加 `loading="lazy"` 属性，轻松实现图片的懒加载。
```html
< img src = "large-image.jpg" loading = "lazy" alt = "Lazy loaded image" >
```
- **视频懒加载**：类似的，视频也可以使用懒加载技术，只有当用户即将观看时才加载视频内容。
通过这些技术，页面的初始加载时间和数据传输量都能够显著减少，从而提升页面的响应速度。
## Chrome 浏览器的安全机制
Chrome 浏览器的安全机制旨在保护用户的数据和隐私， ， （ ）
### 同源策略（ ）
#### 同源策略的定义
**同源策略**（ ） ， （ ） ， ， ， （ ） （ ）
- **来源的定义**：同源意味着两个 URL 具有相同的**协议**、**域名**和**端口**。例如，`https://example.com:443` 与 `https://example.com` 视为同源，但 `https://example.com` 与 `http://example.com` 、`https://sub.example.com` 则被视为不同源。
通过同源策略，
#### 跨源资源共享（ ）
尽管同源策略能够提高安全性，但它也对合法的跨域资源访问造成了限制。为了解决这一问题，**跨源资源共享**（ ）
CORS 的工作机制包括：
- **预检请求**：当浏览器发送跨域请求时，首先会通过 `OPTIONS` 方法发出**预检请求**，询问服务器是否允许该跨域访问。服务器通过响应头中的 `Access-Control-Allow-Origin` 、`Access-Control-Allow-Methods` 等字段来决定是否允许请求。
- **跨域响应头**：服务器可以通过设置 `Access-Control-Allow-Origin` 头部，指定允许访问资源的来源。设置为 `*` 表示允许任何源访问该资源。
```http
Access-Control-Allow-Origin: https://example.com
```
通过 CORS，
### 沙盒机制与浏览器安全
#### 沙盒隔离
Chrome 的**沙盒机制**是其安全架构的核心之一。**沙盒**将每个标签页、插件或扩展的渲染进程与操作系统隔离开来，限制其对系统资源的访问。这意味着，即使某个网页包含恶意代码，该代码也无法直接访问或修改用户的文件、网络连接或其他敏感资源。
- 沙盒隔离的优点：
- **限制访问权限**：沙盒通过减少进程的权限，确保恶意网站或代码只能在受控的环境中运行，无法对系统核心组件造成威胁。
- **安全分区**：每个标签页的渲染进程都在沙盒中独立运行，如果一个标签页崩溃或受到攻击，其他标签页不会受到影响，保障了浏览器的稳定性和安全性。
这种基于沙盒的隔离策略，不仅防止了浏览器内恶意脚本的横向移动，还阻止了潜在攻击对操作系统和用户数据的直接访问。
#### 内容安全策略（ ）
**内容安全策略**（ ） ）
- CSP 的作用：
- **防止 XSS 攻击**：通过 CSP， ，
- **限制资源加载**：
CSP 示例：
```http
Content-Security-Policy: script-src 'self' https://trusted.cdn.com; object-src 'none';
```
该策略仅允许从当前来源（`self`）和受信任的 CDN（ ） ，
## Chrome 扩展开发
### Chrome 扩展的核心概念
Chrome 扩展是用于增强浏览器功能的模块，允许用户根据需求自定义浏览体验。开发 Chrome 扩展需要遵循特定的结构和 API 规范。以下是 Chrome 扩展的核心概念和主要组成部分：
#### `manifest.json` 文件
**`manifest.json`**是每个 Chrome 扩展的核心配置文件，负责定义扩展的基本信息、权限、功能以及相关资源。该文件的内容决定了扩展的行为方式以及可以访问的浏览器功能。主要字段包括：
- **`name`**：扩展的名称。
- **`version`**：扩展的版本号。
- **`manifest_version`**： ）
- **`permissions`**：扩展所需的权限，如访问特定网站、读取浏览历史、操作标签页等。
- **`background`**：定义扩展的**背景脚本**，可以长期运行并处理后台任务。
- **`content_scripts`**：定义**内容脚本**，它们能够注入到网页中，操纵 DOM 结构。
- **`icons`**：扩展所使用的图标。
示例：
```json
{
"name": "My Chrome Extension",
"version": "1.0",
"manifest_version": 3,
"permissions": ["tabs", "storage"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["content.js"]
}
],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
```
#### 背景脚本（ ）
**背景脚本**负责管理扩展的长时间运行任务，通常用于事件监听、消息传递和执行特定的操作。背景脚本在后台运行，不会直接与网页交互，它们可以通过**chrome API**与浏览器进行通信。例如，它可以监听标签页的创建、关闭或消息传递。
在 Manifest Version 3 中，背景脚本被**Service Workers**取代，进一步增强了扩展的性能和安全性，确保扩展在不活动时不占用系统资源。
示例：
```javascript
chrome.runtime.onInstalled.addListener(() => {
console.log("Extension installed");
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === "complete") {
console.log("Tab updated:", tab.url);
}
});
```
#### 内容脚本（ ）
**内容脚本**运行在特定网页的上下文中，允许开发者直接操作网页的 DOM 结构。它们可以修改页面的内容、插入样式或脚本，但不能直接访问 Chrome 扩展的 API。为了与背景脚本或扩展其他部分通信，
内容脚本与页面的 JavaScript 环境是分离的，虽然它们能够操作 DOM，
示例：
```javascript
document.body.style.backgroundColor = "yellow";
```
### 扩展的安全模型
为了防止恶意扩展滥用浏览器功能，
#### 权限模型
每个 Chrome 扩展必须在 `manifest.json` 中明确声明其所需的权限，如访问特定网站的权限、读取或修改浏览历史的权限、操作 Cookie 或标签页的权限等。Chrome 通过这种机制限制扩展的访问范围，以减少潜在的安全威胁。
常见权限示例：
- `"tabs"` ：允许扩展访问和操作浏览器的标签页。
- `"cookies"` ：访问和修改网站的 Cookie。
- `"storage"` ：使用 Chrome 的本地存储功能。
- `"activeTab"` ：允许扩展与当前活动的标签页交互。
#### 跨域请求
Chrome 扩展可以通过 `chrome.extension` API**执行跨域请求，而无需遵守浏览器通常的**同源策略**（ ） ， ， `manifest.json` 中声明明确的权限，允许扩展访问特定域名。这种设计确保扩展不会随意访问或篡改用户的数据。
```json
{
"permissions": [
"https://api.example.com/"
]
}
```
通过这种方式，用户可以清楚地了解扩展的访问权限，防止扩展未经许可访问敏感数据。
### 开发与调试
Chrome 扩展的开发过程中，
#### Chrome DevTools
Chrome DevTools 不仅可以用于调试网页，还支持对 Chrome 扩展进行调试。开发者可以通过以下功能调试扩展：
- **调试内容脚本**： ， ，
- **调试背景脚本**： ， ，
- **消息传递调试**： ，
#### 发布到 Chrome Web Store
扩展开发完成后，开发者可以将其打包并发布到**Chrome Web Store**。发布步骤如下：
1. **打包扩展** ：在 Chrome 的扩展管理页面中，将开发完成的扩展打包为 `.zip` 文件。
2. **注册开发者账号** ：开发者需拥有 Google 账号并注册成为 Chrome Web Store 的开发者。
3. **上传扩展** ：通过 Chrome Web Store 管理后台上传打包的扩展文件。
4. **填写扩展信息** ：包括扩展名称、描述、版本信息、权限说明、截图等。
5. **审核和发布** ：
## Chrome 的前沿技术
Chrome 浏览器始终处于推动 Web 技术发展的前沿，不断引入新的技术来增强 Web 应用的功能和性能。以下是两项重要的前沿技术：**渐进式 Web 应用（ ） （ ）
### 渐进式 Web 应用（ ）
渐进式 Web 应用（ ）
#### PWA 的核心技术
- **Service Workers**： ，
另一个关键功能是**推送通知**。即使应用未被打开， ， ，
```javascript
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(error => {
console.log('Service Worker registration failed:', error);
});
}
```
- **Manifest 文件**：
示例 `manifest.json` 文件：
```json
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/index.html",
"icons": [
{
"src": "/images/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"background_color": "#ffffff",
"display": "standalone"
}
```
#### PWA 在 Chrome 中的支持与调试
Chrome 对 PWA 提供了全面的支持，并且可以通过**Chrome DevTools**对 PWA 的功能进行调试：
- **离线缓存调试**：在 Chrome DevTools 的 "Application" 面板中，开发者可以查看和管理 Service Workers 的缓存状态，查看哪些资源被缓存，以及何时清理缓存。
- **推送通知调试**：
- **Manifest 文件调试**：通过 DevTools 的 "Application" 面板，开发者可以检查 PWA 的 Manifest 文件配置，确保应用图标、启动 URL 等内容符合预期。
### WebAssembly（ ）
**WebAssembly**（ ） ，
#### WebAssembly 简介
WebAssembly 是一种**平台无关的二进制格式**，通过编译其他高级语言（如 C、C++、Rust） ，
WebAssembly 的主要优点包括：
- **高性能**：相比于 JavaScript，
- **跨平台**： ，
- **语言无关性**：
#### 与 JavaScript 互操作
WebAssembly 并非要完全取代 JavaScript，
下面是一个基本的 WASM 和 JavaScript 互操作示例：
1. 编译 C 代码为 WASM： `add` ，将其编译为 WASM 模块。
```c
// add.c
int add(int a, int b) {
return a + b;
}
```
使用 `emscripten` 工具链将 C 代码编译为 WebAssembly：
```shell
emcc add.c -s WASM=1 -o add.wasm
```
2. 在 JavaScript 中加载和调用 WASM 模块：
```javascript
const importObject = {
env: {
// 可以定义一些供WASM使用的全局变量或函数
}
};
WebAssembly.instantiateStreaming(fetch('add.wasm'), importObject)
.then(obj => {
const add = obj.instance.exports.add;
console.log("Result of 3 + 4 =", add(3, 4)); // 输出：
});
```
在这个示例中， `add` 函数，并通过 JavaScript 进行调用。WebAssembly 模块可以高效执行数值运算、处理复杂算法，从而显著提升应用的性能。
