重绘和重排以及如何优化

重绘
当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
当盒子改变 颜色的时候会引起 重绘
重排
当盒子改变自己的位置大小时 隐藏改变 display;none 会引起重排

触发重排的条件: 任何页面布局和几何属性的改变都会触发重排，
1、页面渲染初始化;(无法避免)
2、添加或删除可见的DOM元素;
3、元素位置的改变，或者使用动画;
4、元素尺寸的改变―—大小，外边距，边框;
5、浏览器窗口尺寸的变化(resize事件发生时）;
6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变;
7、读取某些元素属性:（offsetLeft/Top/Height/width,clientTop/Left/Width/Height,scrollTop/Left/Width/Height,width/height, getComputedstyle(), currentStyle(IE) )
重绘重排的代价:耗时，导致浏览器卡慢。卡

优化
1.直接改变样式名称 className 不一个个修改属性的参数
2. 添加元素时 一起创建 最后一起添加
3. 将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素;