浏览器内核
Trident:IE，360，搜狗
Gecko：firefox
webkit:safari，旧版chrome
presto：旧版opera
blink(webkit的一个分支)：新版chrome，新版opera
浏览器的渲染方式
构建DOM树 浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。（解码->令牌化->词法分析->dom树创建）
构建CSSOM css文件加载完成，开始构建CSSOM（CSSOM只输出包含有样式的节点）
生成渲染树（Render Tree） CSSOM构建结束后，和DOM一起生成Render Tree
计算渲染树布局（Layout） 有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。
将布局Paint绘制到屏幕上 布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。
CSS阻塞渲染：由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。 JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了。
重绘（Repaint）：
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
- 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少。
触发重绘
- DOM改动
- CSS改动
重排（Reflow）：
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。
- 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
触发重排
- 当增加、删除、修改DOM节点时，会导致reflow或repaint
- 当移动DOM的位置，或是插入动画的时候
- 当修改CSS样式的时候
- 当Resize窗口的时候，或是滚动的时候
- 当修改网页的默认字体时
最小化重绘和重排
避免频繁使用 style，而是采用修改class的方式。
批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment）使用createDocumentFragment进行批量的 DOM 操作。
缓存布局信息
对于 resize、scroll 等进行防抖/节流处理。
