浏览器工作原理与实践pdf_WEB浏览器工作原理(1)

译者：虚痕
浏览器是web开发的基石，是web最底层的运行环境，支撑了整个web技术的发展，深入了解浏览器原理对每一个web开发同学都大有益处。
浏览器的架构
浏览器的主要组件：

浏览器的主要组件

1. 用户界面：用户界面是用户与浏览器进行交互的模块。
   它包括地址栏，后退和下一步按钮，主页按钮，等一系列与用户操作事件的息息相关的工作。
2. 浏览器引擎：浏览器引擎充当用户界面和渲染引擎之间的桥梁。
   所有的用户输入动作，都需要通过浏览器引擎分析过后再操作渲染引擎做出可视化的响应。
3. 渲染引擎：渲染引擎负责在浏览器屏幕上呈现所请求的网页。
   分析CSS格式化的HTML，XML文档和图像，并生成用于用户界面中显示的布局。
   并且还可使用插件或扩展来显示其他类型的数据。
   不同的浏览器使用不同的渲染引擎：
   * Internet Explorer：Trident （最新版已经使用Chrome内核）
   * Firefox和其他Mozilla浏览器：Gecko
   * Chrome和Opera 15+：Blink
   * Chrome（iPhone）和Safari：Webkit
4. 网络：网络模块，使用HTTP或FTP的常见Internet协议分析URL。
   网络组件处理Internet通信和安全性的所有事务。
   网络组件可以实现文档的缓存，以减少网络流量。
5. JavaScript解释器：它是浏览器的组件，用于解析和执行网站中嵌入的javascript代码。
   解析后的结果将发送到渲染引擎进行显示。
   如果脚本是外部的，则首先从网络中获取资源。
   解析器将保持暂停状态，直到执行脚本为止。
6. UI后台：UI后台用于绘制基本小部件，例如组合框和窗口。
   它在下面使用操作系统最底层的UI方法。
7. 数据持久性/存储：这是一个持久性层。
   浏览器支持诸如localStorage，IndexedDB，WebSQL和FileSystem之类的存储机制。
   它可以在安装了浏览器的机器磁盘上创建小型数据库。
   用于管理用户数据，例如缓存，cookie，书签和首选项。

这里要注意的重要一点是，在chrome等网络浏览器中，每个选项卡都在单独的进程（多个渲染引擎实例）中运行。
渲染引擎
网络层将开始以块的形式将请求文档的内容发送到渲染引擎。

渲染引擎基本流程
渲染引擎解析HTML文档的数据块，并将元素转换为树中的“节点
树”或“DOM树”中的DOM节点。
它还会解析外部CSS文件以及样式元素。
在构建DOM树时，浏览器将构建另一棵树，即渲染树。
该树按顺序显示视觉元素。
它是文档的视觉表达。
该树的目的是使用正确的顺序绘制可视内容。
WebKit使用术语渲染器或渲染对象。
构建渲染树之后，它会经历渲染树的“布局过程”。
创建渲染器并将其添加到树时，它没有位置和大小。
计算这些值的过程称为布局或回流。
这意味着为每个节点计算应在屏幕上显示的确切坐标。
根渲染器的位置为0,0，其尺寸为浏览器窗口的可见部分。
所有渲染器都有一个“布局”或“重排”的方法，每个渲染器都需要调用布局方法。
下一阶段是
绘画。
在绘画阶段，遍历渲染树，并调用渲染器的“ paint（）”方法以在屏幕上显示内容。
绘画使用UI后台层（chrome使用的底层制图引擎是 skia）。
原文引用至：
medium.com/@monica1109…