基础 - 浏览器原理 - 《前端学习》

高层架构

用户界面	地址栏，前进/后退按钮，书签菜单等。除了主窗口显示外都属于用户界面。
浏览器引擎	在用户界面和呈现引擎之间传送指令
呈现引擎	负责显示请求内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
网络	用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
用户界面后端	用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
JavaScript解释器	用于解析和执行 JavaScript 代码。
数据存储	这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

浏览器原理 - 图1

在浏览器的屏幕上显示请求的内容
WebKit

浏览器原理 - 图2

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

指将文档转化为有意义的结构，也就是可让代码理解和使用的结构。
解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树。

解析是以文档所遵循的语法规则（编写文档所用的语言或格式）为基础的。所有可以解析的格式都必须对应确定的语法（由词汇和语法规则构成）。

文档对象模型 (Document Object Model)
DOM是HTML文档的对象表示，同时也是外部内容与HTML元素之间的接口。
DOM与标记之间几乎是一一对应的关系。

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

浏览器原理 - 图4

浏览器原理 - 图5

浏览器原理 - 图6