Reflow和Repaint的基本认识

重绘(repaints)是一个元素外观的改变所触发的浏览器行为，例如改变vidibility，color等，重绘并不一定会导致回流

回流(reflow) 指的就是浏览器为了重新渲染部分或者全部文档而重新计算元素的位置和几何结构过程，就比如砍掉某节点元素或者改变位置或者大小也可能会造成父级元素以及子元素也产生回流

重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性，回流更是性能的关键，某一块元素的变化可能会造成部分区域或者整个页面的布局发生变化

所以我们在写js或者css的时候需要尽量把回流对性能的影响降到最低

dom优化

1.在修改元素样式的时候，通过修改classname名获取样式，也就是多次dom修改合并成一次

dom.style.color='#cccccc';
dom.style.top='10px';

////

dom.className='m';
.m{
color:#cccccc;
top:10px;
}

我们会用dom碎片进行组合再添加到整个dom上，因为这样仅导致一个回流。所以，style属性设置也一样会导致回流，避免设置多级内联样式。当元素获取外部类的样式时只会产生一次回流。

2.动画效果的position值为fixed或者absolute
动画效果在移动过程不会影响其他元素布局，不会导致其他元素的回流

3.使用缓存，缓存临时节点，不要每次都去获取

4.操作dom可以先把dom节点删除或隐藏，隐藏的节点不会重排

5.批量增加尽量使用innerhtml，多次添加的时候innerhtml要好过appendchild

6.有些浏览器会对重排做优化，比如等一个线程结束或足够数量的变化发生再进行处理。但浏览器为了得到某些属性值的正确性也会重排,这些属性有：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight。所以多次使用应该使用缓存

css优化

多写类选择器。通配符不说了，还有一些统统padding/margin：0，滥写css reset。选择器叠层也不要太复杂毕竟是从右往左找

后话：

dom操作肯定是不可避免的，框架本身也避免不了dom操作，只能把代价减低,类似react就是使用v-dom来对dom结构进行比较，对js对象进行操作，修改部分节点，利用已有节点修改有新节点才创建。浏览器对于dom操作肯定会做优化的，合并批处理什么的