编者按：本文从市面上主流浏览器及相应的内核引擎入手，介绍以Chromium为代表的浏览器架构以及Blink内核的功能架构。 Chromium 是一个多进程架构。 启动并运行浏览器后，用户会经历页面导航、渲染、资源加载、样式估计、布局、绘图、合成、光栅化，最后是 GPU 显示。 页面渲染完成后，浏览器如何响应页面操作风暴也进行了深入介绍。 良心推荐！
本文第二至第五部分是根据小坂真理子的《Insidelookatmodernwebbrowser》英文原文（见参考文献）进行翻译、理解、总结、整理、添加应用实例，并补充和扩展相关知识。
1.浏览器简介
浏览器经历了多年的发展，浏览器引擎也在不断迭代和进化。 从PC时代到联通端兼容html5的浏览器，无论是以独立浏览器的形式存在，还是嵌入系统WebView组件中，它仍然在互联网生态中发挥着重要作用。 了解浏览器及其工作原理可以打开另一个世界。
1.浏览器引擎
以下是市场上剩余的主流浏览器的引擎介绍。
1.1 浏览器引擎
1）Chromium：基于webkit，从2008年开始被用作Chrome的引擎。Chromium浏览器是Chrome的实验版本，尝试新功能。
2）Webkit2：2010年随OSXLion一起推出。WebCore级别的进程隔离与Google的沙箱设计相冲突。
3）Blink：基于Webkit2分支，微软在2013年开始将其作为Chrome28引擎集成在Chromium浏览器中。Android的WebView也是基于Webkit2。
1.2 谷歌浏览器
目前PC场景的操作系统仍然以Windows为主。 对于桌面用户来说，虽然IE的市场份额在不断增加，但IE之前也过得不错。 IE内核主要基于Trident，最新的Edge也兼容Chromium内核。
MicrosoftEdge：内核为：EDGE，Windows 10默认浏览器，无法单独下载安装。兼容Chromium核心，同时保留EDGE核心兼容企业网站
2. 浏览器架构
目前Chromium浏览器的架构主要由以下部分组成。
下面是结构介绍：
JavaScriptCore（适用于 Safari）
网络核心
相关信息
2.1 多进程架构
图片引用自chromium-design-doc
2.1.1 Chromium多进程架构
早期的网络浏览器页面行为不当、浏览器错误和浏览器插件错误可能会导致整个浏览器或当前运行的选项卡关闭。 因此将 Chromium 应用程序放置在彼此隔离的单独进程中：
2.1.2 架构组成
2.1.3 渲染进程管理
2.1.4 操作流程
2.1.5 插件扩展
第三方编译的NPAPI插件不稳定，需要控制对系统资源的访问，因此它们运行在单独的进程中，与渲染器分开。
插件设计文档：
2.2 Webkit（Blink）框架
Blink是Web平台的渲染引擎，它实现了浏览器选项卡中渲染的内容：
2.2.1 Blink运行流程
多进程架构，有1个浏览器进程和N个沙箱渲染器进程，Blink运行在沙箱渲染中。 浏览器选项卡和 iframe 可以共享相同的渲染器进程。
沙箱操作：在沙箱中，必须由父浏览器进程来调度和使用资源（文件访问、网络、音视频播放、用户配置文件读取（cookie、密码）等）。Blink将浏览器进程体现为一个群体服务，使用Mojo与服务和浏览器进程交互。
2.2.2 渲染进程中的线程
跨线程通信：使用PostTaskAPI，除非出于性能原因，否则不鼓励共享显存编程。
2.2.3 闪烁运行和退出
2.2.4 Blink项目代码结构
2.2.5 平台内部构成
1）WTF：统一编码子句，如WTF::Vector、WTF::HashSet、WTF::HashMap、WTF::String和WTF::AtomicString来替代std:vector等。
2）内存管理：a.PartitionAllocb.Oilpan(BlinkGC)c.malloc/free/new/delete
3）任务调度：为了提高渲染引擎的响应，应该异步执行。 所有任务都应发布到 BlinkScheduler 任务队列兼容html5的浏览器，指定正确的类型并设置优先级以启用任务的智能调度。
4) 页面/框架/文档/ExecutionContext/DOMWindow
分别对应于 JavaScript 中的选项卡、iframe、window.document、主线程和工作线程上下文以及窗口对象。
渲染过程中的各种数字关系
5) 进程外iframe
站点隔离：为每个站点（主备域名相同）创建一个渲染器进程。 跨站点由两个渲染器托管。
6) 分离的iframe/文件
doc = iframe.contentDocumentiframe.remove() //iframe 与 dom 树分离doc.createElement('div'); //仍可在分离的框架上运行脚本
向左滑动查看完整代码，下同
7）WebIDL绑定
8）V8
关系：一帧=N个窗口对象=N个世界。 Context对应的是window对象
V8的API是低级的，无法使用，并且在platform/bindings中提供了许多V8API辅助类。 每个 C++ DOM 对象（例如 Node）都有其相应的 V8 包装器。 V8 包装器对应的 C++ DOM 对象具有强引用。 C++ DOM 对象仅具有对 V8 包装器的弱引用。
2.3V8
V8 是 Google 开源的高性能 JavaScript 和 WebAssembly 引擎，采用 C++ 编写，实现了 ECMAScript 和 WebAssembly，可以独立运行或嵌入到任何 C++ 应用程序中，例如 Chrome 和 Node.js。
相关信息
ECMA 脚本：
网络组装：
二、Chrome的多进程架构
注：以下内容根据Mariko Kosaka的英文原版《Insidelookatmodernwebbrowser》（见参考文献）进行翻译、理解、总结、整理、添加应用实例，并补充和扩展相关知识。
1.背景：计算机的核心是CPU和GPU
CPU：CenterProcessingUnit，同时支持并行和串行操作，需要较强的通用性来处理不同的数据类型，支持复杂的通用逻辑判断，需要引入大量的分支和中断处理，结构极其复杂。
GPU：GraphicsProcessingUint，设计用于执行图形渲染所需的复杂物理和几何计算。
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
三层计算机体系结构
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
2. 基础知识：在进程和线程中执行程序
当应用程序启动时，将创建一个进程并提供“slab”内存。 所有应用程序状态都存储在该专用视频存储器中。 当程序关闭时，系统释放视频内存。
应用程序可以创建多个线程来完成工作任务。
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
3. 浏览器架构
浏览器架构没有统一的标准，不同的浏览器可能使用不同的线程或多个不同的进程来构建网络。 少数线程通过IPC进行通信。
3.1 不同浏览器实现的架构
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
3.2 Chrome的多进程架构
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
4.不同进程的作用
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
5、多进程架构
优势：
图片引自 MarikoKosaka 的《Insidelookatmodernwebbrowser》
