# 浏览器工作原理

## 浏览器的主要功能

浏览器的主要功能，在于显示从服务器请求的网络资源。通常是 HTML 文档，但也可能是 PDF、图片或其他格式内容。资源的位置由用户使用 URI （通用资源识别符）指定。HTML 和 CSS 标准定义了浏览器解析 HTML 文件的方式。这些标准由 W3C（World Wide Web Consortium）组织—— Web 标准化组织，维护。以往的多年时间，浏览器只采用部分标准，更多专注于开发他们自己的扩展。这给网页开发者制造了很多兼容性问题。现在，浏览器厂商在比以往采用了更多标准内容。

浏览器用户界面大同小异。主要包含的元素有：

1. 输入 URI 的地址栏
2. 返回前进按钮
3. 书签选项
4. 刷新或暂停加载当前文档
5. 家按钮回到家页面

这些元素并未被标准化组织定义，但各个浏览器都拥有这些元素，可见这些元素是浏览器的最佳实践。

## 浏览器的高级结构

1. User Interface：包括地址栏、后退前进按钮、书签菜单等等。除去请求页面 viewport 的其他部分。
2. Browser engine：控制 UI 和渲染引擎的行为。
3. Rendering engine：负责展示请求的内容。如果请求内容是 HTML，渲染引擎渲染 HTML 和 CSS，将渲染好的内容显示在屏幕上。
4. Networking：对于 HTTP 请求之类的网络调用，在独立于平台的接口背后为不同平台使用不同的实现。
5. JavaScript Interpreter：用于解析和执行 JS 代码。
6. UI Backend：用于绘制组合框和窗口等基本小组件。这个后端公开了一个非平台特定的通用接口。在下面，它使用操作系统用户界面方法。
7. Data persistence/storage：这是一个持久层。浏览器需要在本地保存各种类型数据，比如 cookies。浏览器还支持的存储机制有 localStorage, IndexedDB, WebSQL 和 FileSystem。

要注意，像 Chrome 这样的浏览器会运行渲染引擎的多个实例：由 Tab 分隔。每个 Tab 运行在独立的进程中。

## 渲染引擎

渲染引擎的作用：将请求的内容渲染在屏幕上。渲染引擎可以渲染 HTML、XML 和图片。可以通过插件或扩展来显示其他文件格式。

各大浏览器各自使用的渲染引擎：

1. Google Chrome and Opera v.15+ and Microsoft Edge: Blink(a fork of WebKit)
2. Mozilla Firefox: Gecko
3. Chrome for iOS and Safari: WebKit

### 主要工作流

从网络层得到所请求文档的内容。大小通常在 8kB 块以内。

---

参考资料：

1. [How browsers work](https://web.dev/howbrowserswork/)
2. [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm)
3. [Role of Rendering Engines in Browsers | BrowserStack](https://www.browserstack.com/guide/browser-rendering-engine)