程序员眼中的浏览器什么样子（浏览器底层工作那些事儿）
浏览器已经成为我每天都需要打交道的工具，然而对于这个我们的老朋友，即使一些 web 开发人员也对它的底层工作原理不是非常清楚，今天我们就来简单谈一谈浏览器的底层工作原理。
浏览器的主要功能如果非要用一句话来概括浏览器的功能，那么浏览器就是一个请求资源，然后显示资源的软件。
这里的资源主要就是我们经常提到的 HTML,css,js,还有图片等。
浏览器共有的接口：
- 地址栏
- 前进后退按钮
- 刷新按钮
- 主页按钮
- 收藏按钮
通过这些接口我们就基本掌握了浏览器的基本操作。
浏览器的架构浏览器对外表现就是一个内容展示的容器，但是内部它却由很多组件组成。
- 用户接口（我们前面提到的那些公用操作接口）
- 浏览器引擎（UI 渲染引擎的封装）
- 渲染引擎（负责显示请求的内容，根据 CSS 和 html 显示内容布局）
- 网络引擎（负责 http 请求，负责网络管理）
- UI 引擎（负责绘制基本 html 元素，比如下拉框，输入框等）
- js 解析引擎（解析和执行 JavaScript 代码）
- 数据存储引擎（存储 cookIE，localStorage，IndexedDB，websql 等数据）
其中渲染引擎可以说是最重要的一部分，它一般决定着用户看到网页的加载体验。
不同的浏览器使用不同的渲染引擎，之前的 IE 使用的是 Trident，Firefox 使用 Gecko，Chrome 使用 WebKit 等，目前现在基本都使用 Blink 引擎。
渲染引擎的工作流程大致是这样的。
首先它获取到请求到的内容，然后开始解析 html 结构，将它们转换成 dom 树，然后渲染引擎解析 css 样式，生成一个 css 树，最后，根据样式信息和 html 结构生成 render 树，我们称之为渲染树。
渲染树主要包含了颜色，尺寸等视觉信息。构建渲染树之后，渲染树的每个节点将会经历布局，找到在屏幕上的坐标。然后 UI 引擎会绘制各个节点。
渲染树的构建是渐进的，它会根据结构一点点处理，尽量在屏幕上快速显示部分内容。
对于解析它主要包括两部分，一部分是词法分析，一部分是语法分析。
词法分析，主要是按照词汇表进行分析标记，构建块的集合。
语法分析，主要是根据词法规则构建解析树的解析器。
HTML 解析html 的标记和语法都是被定义好的，因此在解析的时候只要按照规则即可。
html 文档格式是 DTD，它是一个上下文无关的文档格式。它更加宽容，可以省略一些标记，因此解析器处理起来会很复杂。
dom 树是有 dom 元素和属性构成的树形结构。其中 dom 和 html 中间的标记是对应的。
<html>
<body>
<p> Hello World </p>
<div> <img src="example.png"/>
</div>
</body>
<html>
html 结构不能采用常规的自顶向下或者自底向上的解析器进行解析，因此它需要采用自定义的解析器进行解析，通过标记法和树构造进行解析。
例如，将初始状态标记为数据状态，然后从<开始进行标记，遇到问题 a-z 创建令牌，标记为 tag open 状态，直到遇到>，状态变回数据状态。
在创建解析器的时候，会创建文档对象，在解析树构造的时候，会向 dom 树添加元素。
标记法标记的节点会由解析树的构造函数进行处理。当元素被添加到 dom 树的时候，也会被添加到堆栈中。
在解析 dom 树的时候，js 引擎也会解析 js 脚本，dom 解析后，这些脚本会执行。
解析树是具有包容性的，当遇到一些错误的时候，它只会内部进行标记，并不会报错给用户。
css 解析WebKit 引擎使用 Flex 和 Bison 解析器生成器从 CSS 语法文件自动创建解析器。Bison 创建了一个自底向上的 shift-reduce 解析器。每个 CSS 文件都被解析为一个样式表对象。每个对象都包含 CSS 规则。CSS 规则对象包含选择器和声明对象以及与 CSS 语法相对应的其他对象。
在之前的时候，web 模型是同步的，解析器需要获取资源，然后才能继续解析。目前是一个线程进行解析，一个线程用来获取文档剩下需要加载的资源文件。
构建渲染树需要计算每个渲染对象的视觉特性。这是通过计算每个元素的样式特性来完成的。该样式包括各种来源的样式表，内联样式和 html 中的视觉属性。
样式计算是非常复杂的，如果设计不佳的话，就会导致占用过多内存，因此很多浏览器采用通过添加规则树和上下文树来优化样式计算。
页面布局在创建渲染器的时候，它没有位置和大小，然后我们需要计算它的位置和大小，这个过程被称为页面布局或者说叫做页面回流。
布局是一个递归过程，它从根渲染器开始，根据层次结构递归的遍历每个渲染器，然后计算它们的集合信息，最后布局它们。
布局分为全量布局和增量布局。所谓全量布局指的就是会影响所有渲染器的全局样式改变，比如字体改变。而增量布局指的是布局是异步完成的，渲染器通过触发器进行布局。
css 主要是通过盒子模型来布局。每个盒子都有一个内容区域和可选的周围区域，比如边框，边距。其中有些盒子是块状模型，有些是行内模型。
css 布局分为绝对定位和相对定位，绝对定位根据指定位置进行渲染，而相对定位则是根据其他元素的位置进行布局。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
