先回顾一下那些常见的重绘元素

• color 颜色

• border-style 边框样式

• visibility 可见

• background 背景

• text-decoration 文本属性

• background-image 背景图片

• background-position 背景位置

• background-repeat 背景平铺

• outline-color 边框颜色

• outline 外边轮廓

• outline-style 外边框样式

• border-radius 边框圆角

• outline-width 轮廓宽度

• box-shadow 盒子阴影

• background-size 边框大小

先回顾一下那些常见的回流元素

• width 宽

• height 高

• padding 内边距

• margin 外边距

• display 显示

• border-width 外边框宽

• border 外边框

• top 上面

• position 位置

• font-size 文字大小

• float 浮动

• text-align 文本水平对齐 等等等....

什么是重绘

重绘:当元素的一部分属性发生变化,如外观背景颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘

什么是回流

回流:当渲染树中的一部分或者全部因为大小边距等问题发生改变而需要dom树重新计算的过程

注意点

重绘不一定需要回流(如颜色的改变),回流必然导致重绘(如改变网页位置)

解决方法

• 需要对元素进行复杂的操作是可以先隐藏,等操作完在显示出来

• 需要创建多个dom节点时可以使用DocumentFragment创建后一次性加入document缓存layout属性,如var left=elem.offsetLeft这样多次使用left只会产生一次回流

• 尽量避免用table布局(table元素一旦触发回流就会导致table里面所有的其他元素回流)

• 避免使用css表达式(expression),因为每次回调都会重新计算值(包括加载页面)

• 尽量使用css属性简写,如用border代替border-width,border-style,border-color

• 批量修改元素样式:elem.className和elem.style.cssText代替elem.style.xxx

成功，这是至高无尚;振奋与喜悦;勤劳与汗水的代名词，有多少人为它而不断奋斗，有多少人为它而不断成长，人只要努力就会成功!