序言
前几天看了一份关于浏览器工作原理的PPT -> HOW BROWSER WORKS, 觉得还不够，又找了一篇比较更详细的文章 -> 浏览器的工作原理：新式网络浏览器幕后揭秘, 进行补充；有耐心的可以直接跳过我这篇博客看以上的文章，也可以花5分钟时间先看看我这篇博客 [机智脸]
1. 解析DNS
tips：
-
- 请按步骤阅读图片
-
- 第六七步不太确定，欢迎指正
2. 当获取到代码后要怎么做
2.1 解析HTML构建DOM树
tips：
html不是与上下文无关的语法[就是：我当前编写的跟我前后代码无关]，所以html的编写规范很不统一，因此，为了达到统一的效果，需要浏览器解析过程中，具有强大的容错率。
- 状态机：插入模式
HTML是按照一定的流程构建DOM树，构建中执行到某个阶段，就会创建某个元素，然后从HTML文档中解析相关的进行补充。如：执行到 before Head，就是html文档中没有head 也会创建一个head节点。因此： 就算html文档中只是寥寥无几的几个数字，也能构建出完整的树结构。
- 浏览器容错
浏览器执行一定的规则来对有错误的html修改，譬如：未闭合的元素会帮你闭合，元素冲突时，会关闭某些元素，请自行探索
2.2 呈现树结构
说明：
-
呈现树与DOM树不是一一对应的，譬如head元素只是一些说明引用，后期是不需要参与页面布局的，所以不会出现呈现树里面。还有：display:none； 等
-
样式表层叠顺序，后者会覆盖前者。
2.3 布局呈现树
布局有：全局布局和增量布局
全局布局
全局布局触发原因可能包括：
1.影响所有呈现器的全局样式更改，例如字体大小更改。 2.屏幕大小调整。
增量布局
只对 dirty 呈现器进行布局 [这句理解不够]
2.4 绘制呈现树
有个小动图可以去看看： 绘制动图
跟布局一样：绘制也分全局绘制和增量绘制
绘制顺序
1.背景颜色 2.背景图片 3.边框 4.子代 5.轮廓
后记
每个浏览器的原理都不一样，以上我只再选择了Webkit内核的浏览器部分有趣的内容，其他请自行阅读：浏览器的工作原理：新式网络浏览器幕后揭秘
