浏览器工作原理

浏览器内核

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari（ [sə'fɑːrɪ）、Chrome。

浏览器的主要功能

1. 用户界面（这个不重要） － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。

3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6. JS解释器 － 用来解释执行JS代码。

7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

浏览器渲染主流程

1、解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。
2、构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
3、布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。【reflow】
4、绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制。【repaint】

---

repaint和reflow

reflow的成本比repaint高很多，每个dom tree里面的节点都有reflow方法

reflow【回流】：对于DOM结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各样式来计算并根据计算结果将元素放在它该出现的位置。
会在改变某个DOM元素的位置的时候触发，而且它将重新计算所有元素的位置和在页面中的占有面积。这样的话将会引起页面的某一部分或者是整个页面的重新渲染。改变某一个元素会影响它所有的子节点 (children)、祖先节点 (ancestors) 及兄弟节点(siblings)。

1. 添加，删除、改变DOM的可见性时候：使用js去改变dom元素时候会触发reflow【添加，删除，修改dom节点的时候可能导致reflow或者repaint】

2. 添加，删除或者改变css样式：直接改变css style或者元素的class可能会影响布局，还有改变一个元素的宽度能够影响它所在的dom节点中的所有元素，以及它周围的元素

3. css3动画（animation）和过渡（transition）：动画的每一franme都会触发reflow

4. 使用offsetWidth和offsetHeigh：读取一个dom的offsetWidth和offsetHeight属性同样会触发一个reflow，因为两个属性需要依赖一些元素去计算

5. 用户交互：用户通过hover一个a链接，在input里面输入文字，拖动浏览器的大小(resize)，改变字体大小，更换样式表或字体都会触发reflow

---

repaint【重绘】：当各中盒子的位置，大小以及其他属性，例如颜色，字体大小等都确定下来之后，浏览器于是把这些元素都按照各自的特性绘制一边，于是页面的内容就出现了。
会在改变DOM元素的视觉效果的时候触发，改变布局时不会触发。

• opacity background-color visibility outline

---

总结

1. display:none会触发reflow

2. visibility：hidden会触发repaint（位置没有变化）