- 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。
- 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。
- 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
- 渲染引擎（rendering engine） - 渲染内容，主要是html,css,图片等。dsfsdf
- JavaScript 解释器。用于解析和执行 JavaScript 代码。
- 网络 - 用于网络调用，比如 HTTP 请求。
- 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。
渲染引擎分两种，firfox是Gecko，这是 Mozilla 公司“自制”的。而Safari和Chrome浏览器使用的都是 WebKit
开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。
然后进行如下所示的基本流程：
渲染引擎解析 HTML 文档，将各个dom标签逐个转化成“content tree”上的 DOM 节点。同时也会解析内部和外部的css, 解析为css tree, css tree和dom tree结合在一起生成了render tree
render tree是由一系列在按照顺序排列起来的方块组成的，每一个方块都包含类似于颜色、尺寸的信息。
在render tree构建好之后，渲染引擎就会经历一个layout的阶段: 计算出每一个节点应该出现在屏幕上的确切坐标。
之后的阶段被称为paiting阶段，渲染引擎会遍历render tree, 然后由用户界面后端层将每一个节点绘制出来。
渲染引擎会尽快把内容呈现在屏幕上，因此不会等待整个文档加载之后才开始构建，而是一边加载一部分，渲染引擎一边渲染一部分。
解析是渲染引擎中非常重要的一个环节。
解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树。
解析 2 + 3 - 1 这个表达式，会返回下面的树：
解析是以文档所遵循的语法规则（编写文档所用的语言或格式）为基础的。人类语言并不属于这样的语言，因此无法用常规的解析技术进行解析。
解析的过程可以分成两个子过程：lexical analysis(词法分析)和syntax analysis(句法分析)。
lexical analysis(词法分析)的过程，其实就是把输入的内容分为不同的tokens(标记)，tokens(标记)就像是人类语言中的一堆词汇。
syntax analysis(句法分析)则是应用语言句法中的规则。
解析器用了两个部件来做这份工作，一个是lexer，它负责把输入的内容分为不同的tokens, 另一个是parser，根据语言的语法规则分析文档的结构，从而构建解析树。
lexer知道如何清洗掉无关的字符，比如说空白和换行符。
解析是一个迭代的过程。通常，parser问lexer要一个新的tokens，并尝试将这个tokens与某条语法规则进行匹配。
如果该tokens匹配上了语法规则，parser会将一个对应的node添加到解析树中，然后继续问parser要下一个node。
如果该tokens没有匹配上语法规则，parser会将tokens暂时保存，然后继续问lexer要tokens, 直至找到可与所有内部存储的标记匹配的规则。如果找不到任何匹配规则，parser就会引发一个异常。这意味着文档无效，包含语法错误。