##### 浏览器的主要功能
浏览器的主要功能是展示你所选择的资源，这些资源通常是HTML文档，也可能是PDF，图像，以及其他格式内容。这些资源通过统一资源定位符(Uniform Resource Identifier, URI)来定位。
HTML文档是通过HTML和CSS规范类具体说明的。这些规范由W3C组织维护。
##### 浏览器的高层结构
1. **The user interface**
2. **The browser engine**
3. **The rendering engine**
4. **Networking**
5. **UI backend**
6. **JavaScript interpreter**
7. **Data storage**
###### The render engine
默认渲染展示HTML，XML和图片。通过插件或扩展支持PDF之类的展示。
渲染引擎，也就是通常所说的浏览器内核。不同浏览器使用不同的渲染引擎：
- Firefox --> Gecko
- Safari --> WebKit
- Chrome --> Blink
##### The main flow
* Parsing HTML to construct the DOM tree(content tree)
* Render tree construction (add style)
* Layout of the render tree (giving each node the exact coordinates)
* Painting the render tree (painted node using the UI backend layer)
这是一个渐进的过程，为了更好的用户体验，渲染引起会尽快地展示内容。当还有一部分内容还在通过网络传输过来时，另一部分内容已经被解析展示了。
###### Parsing-general
解析一个文档意味着将它翻译成一个代码可以使用的**结构**。解析的结果通常是一个代表着文档结构的节点树，也叫解析树或语法树。
###### Grammars
解析是基于文档所遵循的语法规则进行的。可以进行解析的格式，必须要有由**词汇**和**语法规则**构成的**确定的语法**，也被称为**上下文无关语法**。
###### Parser-Lexer combination
解析可以分为**词法分析(lexical analysis)**和**语法分析(syntax analysis)**。
* lexical analysis: 把输入转化成token(language vocabulary)，即有效的构建块
* syntax analysis: 运用language语言规则
通过**lexer**获得有效的token block，再通过**parser**，用语法规则将这些token block结构化。
###### Translation
在一些情况下，parse tree不是最终产品，而是在translation中使用的中间格式。比如编译(compilation)。
###### Formal definitions for vocabulary and syntax
* vocabulary is usually expressed by **regular expressions**
* syntax is usually defined in a format called **BNF**
一个语言的语法必须是**上下文无关语法(context free grammar)**才可以被正则解析。上下文无关语法的一个直观定义是：语法可以通过BNF完全表达。
###### Type of parsers
There are two types of parses:
* top down parsers: 从语法的高层结构(high level structure)开始，寻找匹配的规则。
* bottom up parsers: 从输入开始，逐步地转化为语法规则，从低层的规则(low level rules)到高层的规则(high level rules)。
###### Generating parsers automatically
手写高效的解析器是很难的，不过这里有工具可以通过输入语法(vocabulary & syntax rules)自动生成解析器。
WebKit使用了两个知名的解析器生成器:
* Flex for creating a lexer
* Bison for creating a parser
###### HTML Parser
将HTML markup解析成parse tree。
###### The HTML grammar definition
The vocabulary and syntax of HTML are defined in **specifications** created by the W3C organization.
###### Not a context free grammar
相较于XML严格的语法，HTML有着较宽松的语法，这使得HTML不是上下文无法语法的，也就无法使用常规的解析器来进行解析。
###### DOM
解析的输出树(解析树)是一个由DOM元素和属性节点构成的树形结构。DOM(Document Object Model)是HTML的对象表示法，以及HTML元素的接口。
###### The parsing algorithm
HTML不能用常规的解析技术：
1. 语言的宽松本质
2. 浏览器对有名的无效HTML的容错支持
3. 解析过程是可重入的(re-entrant)，调用document.write()会更改动态更改HTML。
HTML的解析算法由HTML5规范给出了，该算法包含两个阶段：标记化(tokenization, 也就是lexical analysis)和树构建(tree construction)。
###### The tokenization algorithm
这个算法的输出是HTML token。它被表达为一个状态机。
###### Actions when the parsing is finished
HTML解析完成后，开始解析执行“延迟模式”的脚本。文档状态会被设置为"complete"并且"load"事件会被触发。
###### CSS parsing
CSS是上下文无关语法，可以用常规的parser直接解析。而CSS规范中定义了CSS lexical和syntax grammar。