浏览器工做原理

浏览器内核

使用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技术，这是一种轻量级完整的客户端存储技术

浏览器渲染主流程

一、解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。
二、构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，建立另外一个树 —- 渲染树。
三、布局渲染树: 从根节点递归调用，计算每个元素的大小、位置等，给每一个节点所应该出如今屏幕上的精确坐标。【reflow】
四、绘制渲染树: 遍历渲染树，每一个节点将使用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（位置没有变化）