关于浏览器的页面渲染机制

今天看到一篇关于分析浏览器原理的文章，收获很大。
决定将理解的内容总结出来，目的在于理解底层的原理后相信对前端的很多问题应该能有更深的理解和掌握吧。
那么，一起来揭开浏览器神秘的面纱吧

浏览器的概念

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI（统一资源标示符）指定。

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C进行维护。

浏览器的结构

浏览器的内部主要可以分为一下几个部分

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单、刷新和停止加载按钮、返回主页按钮等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。（PS: 其实对于浏览器的用户界面并没有任何正式的规范，只不过是历史实践自然发展以及彼此之间相互模仿的结果）
2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器 - 用于解析和执行 JavaScript 代码。
7. 数据存储 - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

另外，Chrome和大多数浏览器不同，它的每个标签页都分别对应一个呈现引擎实例，即每个标签页都是一个独立的进程

主流程的工作过程

用户在地址栏输入网址，呈现引擎便会从网络层获取请求文档的内容，其后便会开始执行如下步骤

1. 呈现引擎开始解析HTML文档，将各个标签转化成DOM节点，同时会解析CSS样式。这一步将生成DOM树（dom tree）和样式树（style rules）
2. 将样式树附着到DOM树上，从而构建呈现树（render tree），呈现树记录着元素渲染时出现的先后顺序
3. 开始布局，根据呈现树计算元素大小和位置
4. 根据布局绘制页面到显示设备

需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

深入文档的解析

dom树和样式树的构建需要通过一定的解析规则才能准确无误地生成呈现树，解析的过程可以分成两个子过程：词法分析和语法分析。

• 词法分析是负责将输入内容分解成一个个有效标记的过程，标记是语言中的词汇，即构成内容的单位。
• 语法分析是应用语言的语法规则的过程，负责根据语言的语法规则分析文档的结构，从而构建解析树。

HTML 的词汇和语法在 W3C 组织创建的规范中进行了定义。而 HTML 解析器的任务就是将 HTML 标记解析成解析树，即由 DOM 元素和属性节点构成的树结构。 和 HTML 一样，DOM 的规范也是由 W3C 组织制定的。
HTML 的解析算法有两个阶段：

1. 标记化
2. 树构建

最后的DOMContentLoaded

DOMContentLoaded事件：当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载。
load事件：当一个资源及其依赖资源已完成加载时，将触发load事件。

参考来源