1什么是DOCtype和作用
2.浏览器怎么渲染的
3.重排flow
4.重绘
5.布局Layout
什么是DOCtype和作用
为构建渲染树，浏览器大体上完成了下列工作：
-
从 DOM 树的根节点开始遍历每个可见节点。
- 某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
- 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，例如，上例中的 span 节点---不会出现在渲染树中，---因为有一个显式规则在该节点上设置了“display: none”属性。
-
对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。
- 发射可见节点，连同其内容和计算的样式。
repaint：针对某个元素进行重绘。
reflow： 针对整个页面的重排，回流。
性能
reflow性能消耗大于repaint
如何触发
style变动造成repaint和reflow。
不涉及任何dom元素的排版问题的变动为repaint。
常见触发
触发repaint
- color,hover引起的颜色，text-align等变化
触发reflow
- width/height/border/margin/padding
- 动画，display
- appendChild等dom元素操作
- font字体改变
- background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
- scroll页面
- resize页面
- 读取元素的属性offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
避免
- 尽可能在DOM末梢通过改变class来修改元素的style属性：尽可能的减少受影响的DOM元素。
- 避免设置多项内联样式：使用常用的class的方式进行设置样式，以避免设置样式时访问DOM的低效率。
- 设置动画元素position属性为fixed或者absolute：由于当前元素从DOM流中独立出来，因此受影响的只有当前元素，元素repaint。
- 牺牲平滑度满足性能：动画精度太强，会造成更多次的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
- 避免使用table进行布局：table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。
- 避免在CSS中使用运算式：学习CSS的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。
(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置 (2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值 (3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
8. 集中修改样式
(1). 尽可能少的修改元素style上的属性 (2). 尽量通过修改className来修改样式 (3). 通过cssText属性来设置样式值
如下的代码中，每一次赋值都会造成浏览器重新渲染，可以采用cssText或者className的方式
el.style.color = 'red;
el.style.height = '100px';
el.style.fontSize = '12px';
el.style.backgroundColor = 'white';
9.缓存Layout属性值
对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth;
var scrollLeft = el.scrollLeft;
链接：https://www.jianshu.com/p/9cfe95b9ef4e
