导语：本文从市面主流的浏览器及相应的内核引擎开始，介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。Chromium为多进程架构，用户从启动运行浏览器后，先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成到栅格化，最后完成GPU展示。而页面渲染完成后，浏览器如何响应页面操作事件也进行了深入的介绍。良心推荐！
本文第二至五部分内容根据 Mariko Kosaka 的英文原版《Inside look at modern web browser》(见参考文献)，进行翻译、理解、总结提炼、条理化、加入应用示例、进行相关知识补充扩展而来。
浏览器经历了很多年的发展，浏览器引擎也在不停地迭代和演进。从PC时代到移动端，以独立浏览器的形态还是以系统WebView组件内嵌的形态存在，在互联网的生态系统中一直扮演着重要的角色。了解浏览器及其原理可以让我们打开另一个世界。
1. 浏览器引擎
以下是市面留存的主流浏览器的引擎介绍。
1.1 浏览器引擎
- Trident：IE浏览器引擎
- Gecko：Firefox浏览器引擎
- Presto：Opera浏览器引擎
- WebKit：Safari，Google Chrome浏览器引擎。
1) Chromium：基于webkit，08年开始作为Chrome的引擎，Chromium浏览器是Chrome的实验版，实验新特性。
2) Webkit2：2010年随OS X Lion一起面世。WebCore层面实现进程隔离与Google的沙箱设计存在冲突。
3) Blink：基于Webkit2分支，13年谷歌开始作为Chrome 28的引擎集成在Chromium浏览器里。Android的WebView同样基于Webkit2。
1.2 微软浏览器
目前PC场景操作系统仍是windows一统天下，对桌面用户来说，虽然IE的市场份额在下降，但是IE曾经也风光过。IE内核以Trident为主，最新的Edge也兼容了Chromium内核。
Microsoft Edge：内核为：EDGE，Windows 10默认浏览器，不能单独下载安装。兼容Chromium内核，同时保留EDGE内核来兼容企业网站
- Internet Explorer 11：Windows 8.1，引擎Trident 7.0
- Internet Explorer 10：Windows 8默认浏览器，引擎Trident
- Internet Explorer 9
- Internet Explorer 8：Windows 7集成
- Internet Explorer 7：Windows Vista集成，2016年停止支持
- Internet Explorer 6：2014年停止支持
2. 浏览器架构
目前chromium浏览器的架构主要由下以几个部分构成。
以下为架构的介绍：
- 操作系统：WebKit可以运行在不同的操作系统上，如Chromium浏览器支持Windows、Linux、Android等系统；
- 第三方库：这些库是WebKit运行的基础，包括2D图形库、3D图形库、网络库、存储库、音视频库等；
- WebCore：WebKit加载和渲染网页的基础，是不同浏览器所使用的WebKit中共享的部分，包括HTML解析器、CSS解析器、SVG、布局、渲染树等等；
- JavaScript引擎：JavaScript解析器，WebKit默认的引擎是JavaScriptCore，Google的Blink为V8引擎；
- WebKit Ports：WebKit中的移植部分，包括网络栈、音视频解码、硬件加速等模块，这部分对WebKit的功能和性能影响比较大。
- WebKit嵌入式接口：WebKit对外暴露的接口层，这个接口是提供给浏览器调用的，如给chromium调用，因为接口与具体的移植也有关系，所以中间会有一个WebKit绑定层
JavaScriptCore（用于Safari）
- JavaSript Parser，JSON Parser
- 字节编译器：使用内部字节码格式
- 汇编程序：在运行时使用代码修补 - >它需要可写代码内存
- 数据流图：基于编译时推测优化生成代码的新举措
- 解释器：运行生成的字节码
- Regexp引擎：支持JIT
- 垃圾收集器：标记和扫描
- 运行时：所有JS全局对象（日期，字符串，数字等）
- 调试器，Profiler
WebCore
- 资源加载器：HTML和XML解析器，DOM
- SVG和SMIL
- CSS：分析器，选择器，动画
- 渲染和布局
- 绑定生成器：IDL文件：JSC，V8，ObjC
- HTML5：音频，视频，画布，WebGL，通知功能
- WebInspector
- 平台集成：图形，字体，声音，视频
相关资料
- Blink内核：https://src.chromium.org/viewvc
2.1 多进程架构
图片引自chromium-design-doc
https://www.chromium.org/developers/design-documents/multi-process-architecture
2.1.1 Chromium多进程架构
早期的web浏览器页面行为不当、浏览器错误、浏览器插件错误都会引起整个浏览器或当前运行的选项卡关闭。因此将chromium应用程序放在相互隔离的独立的进程中：
- 单个程序崩溃不会损害其他应用程序
- 不影响操作系统完整性
- 每个用户不能访问其他用户数据(内存保护、访问控制)
2.1.2 架构组成
- UI主进程：页面选项卡、插件进程作为浏览器进程。
- 渲染进程：特定选项卡作为渲染进程(渲染器)，使用Blink(Webkit)开源布局引擎解释和布局HTML。
2.1.3 渲染过程管理
- RenderProcess：每个渲染进程都有一个全局对象，管理与父浏览器的通信并维护全局状态
- RenderProcessHost：浏览器为每个渲染进程维护相应的渲染进程宿主，为每个渲染器管理浏览器状态和IPC(IPC已弃用，最新用Mojo)通信
- RenderView：每个渲染进程有一或多个RenderView对象，对应内容选项卡。RenderProcessHost为渲染器的每个视图(RenderView)维护一个RenderViewHost。每个视图用一个ID区分。
2.1.4 运行流程
- 渲染进程共享：开启浏览器新窗口或新选项卡时，创建新的浏览器进程，并创建RenderView。不同页面/iframe可共享同个渲染进程。
- 崩溃监视：浏览器的IPC连接会监视进程句柄，如句柄对应的渲染进程已崩溃，会向标签发送通知，浏览器会显示“悲伤标签”
- 沙箱运行：渲染器在单独的进程中运行，通过沙箱限制其对系统资源(文件、网络、显示、击键)的访问，而须通过父浏览器进程访问
- 内存交回：进程最小化、隐藏的选项卡将其内存自动放入“可用内存”，内存不足时，windows会将该可用内存数据写磁盘，内存被用于更高优先级任务，以提高可见程序的响应速度。
2.1.5 插件扩展
第三方编写的NPAPI插件因存在不稳定，同时需控制对系统资源的访问，在各自独立的进程中运行，与渲染器分开。
插件设计文档：https://www.chromium.org/developers/design-documents/plugin-architecture
2.2 Webkit(Blink)架构
Blink是Web平台的渲染引擎，实现了浏览器选项卡中呈现的内容：
- HTML：实现Web平台规范，HTML规范(DOM、CSS、Web IDL)
- JavaScript：嵌入V8并运行JavaScript
- 网络：从底层网络堆栈请求资源
- 渲染：构建DOM树，计算样式和布局，嵌入合成器并绘制图形
- 通过内容公共Api对外提供公共能力。
2.2.1 Blink的运行流程
多进程架构，有一个浏览器进程和N个沙盒渲染器进程，Blink在沙盒渲染中运行。浏览器选项卡、iframe可共享同个渲染器进程。
沙箱运行：在沙箱中，须通过父浏览器进程来调度使用资源（文件访问、网络、音视频播放、用户配置文件读取(cookie，密码)等。Blink将浏览器进程抽象为一组服务，使用Mojo与服务、浏览器进程交互。
2.2.2 渲染进程中的线程
- 1个主线程：运行JavaScript、DOM、CSS、样式布局计算
- N个工作线程：运行Web Worker，ServiceWorker，Worklet
- 内部线程：Blink和V8会创建几个线程处理web audio，数据库，GC等
跨线程通信：使用PostTask API，不鼓励共享内存编程除非性能原因。
