浏览器工作原理

参考文章：
How Browsers Work: Behind the scenes of modern web browsers
浏览器工作原理详解

浏览器的高层结构

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。
2. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。
3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器。用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。

7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

   
   
   

   值得注意的是，不同于大多数浏览器，Chrome 浏览器为每个标签页(Tab)都分配了各自的渲染引擎实例，每个标签页都是一个独立的进程(即每个标签页面都在独立的“沙箱”内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭)。

渲染引擎

渲染主流程：
解析HTML构建DOM树 => 构建render树 => 布局render树 => 绘制render树

渲染主流程

渲染引擎解析HTML文档，并将文档中的标签转化为dom节点树，即”内容树”。同时，它也会解析外部CSS文件以及style标签中的样式数据。这些样式信息连同HTML中的”可见内容”一道，被用于构建另一棵树——”渲染树(Render树)”。

到这里我是有看了多个版本的翻译，有很多细节都不一样，其实这很有误导性。在翻译的过程中会在自己理解的基础上加一些润色的词语，比方上文的“同时”位置，另一篇翻译中此处写的是“接着”，但原文并没有两种类似的词语，这就会让读者误以为是有先后关系，但其实作者也没有提到有没有次序问题，所以看英文的一手资料是很重要的。

解析与DOM树构建

渲染树树构建

布局

绘制

动态变化

渲染引擎的线程

CSS2 可视化模型