重绘
当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。
重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
当盒子改变 颜色的时候会引起 重绘
重排
当盒子改变自己的位置大小时 隐藏改变 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,元素脱离了文档流,它的变化不会影响到其他元素;