面对前端（一）----深入解析浏览器的幕后工作原理

==转载自 梦想天空-----https://www.cnblogs.com/lhb25/p/how-browsers-work.html

一。浏览器的主要组件：
1）：用户界面：包括地址栏，进退按钮，书签菜单
2）浏览器引擎：在用户界面和呈现引擎之间传送指令
3）呈现引擎：负责显示请求内容，解析
4）网络：用于网络调用，、其接口于平台无关
5）用户界面后端：用户绘制基于窗口的小部件
6）Javascript解释器
7）数据存储：这是持久层，浏览器需要在硬盘上保存各种数据：如Cookie

Webkit是一种开源代码呈现引擎，一开始就会从网络层获取请求文档的内容，内容的大小一般限制在8000个快以内
呈现引擎将开始解析HTML文档，并将各个标记逐个转发成内容树上的DOM节点。同时也会解析外部CSS文件以及样式元素中的样式数据。HTML中这些代有视觉指令的样式信息将用于创建另一个树结构：呈现树
呈现树包含多个代有视觉属性（如颜色和尺寸）的矩阵，这些矩阵的排列顺序就是他们将在屏幕上显示的顺序。
呈现树构建完毕后，进入布局阶段，也就是为每一个节点分配一个出现屏幕上的确切坐标下一个阶段吧就是绘制。
解析
解析文档就是指将文档转换成有意义的结构，也就是可以让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，成及解析树或语法树。
这种语法称为于上下文无关的语法，人类语言不属于这种语法。
解析器和词法分析器的组合
解析的过程分为两个子过程：词法分析和语法分析
语法分析是将输入内容分割成大量标记的过程，标记是语言中的词汇，即构成单位中的内容
语法分析是应用语言的语法规则的过程
词法分析器（标记生成器）负责将输入内容分解成一个个有效标记，而解析器负责更具语言的语法规则分析文档规则从而构建解析树
解析是一个迭代的过程。
翻译：很多时候解析树还不是最终产品，解析通常实在翻译中使用的，翻译是指将输入文档转换成另一种格式。编译器就是将源代码解析成解析树，然后解析树翻译成机器代码文档。
DOM
解析器的输出“解析树”是由DOM元素和属性节点构成的树结构。DOM是文档对象模型的缩写。它是HTML文档的对象表示，同时也是外部内容(如JavaScript）与Html元素之间的接口。解析树的根节点是Document对象。DOM与标记之间几乎是一一对应的关系。
对于语法树解析详细看连接----https://blog.csdn.net/chao_624/article/details/53468448
对于状态机思路在程序设计中的应用-------https://blog.csdn.net/eager7/article/details/8517827
彻底搞懂状态机------https://blog.csdn.net/wordwarwordwar/article/details/78509445
更加详细的算法可以参考连接----https://www.cnblog.csdn.net/lhb25/p/how-browers-work.html