如何减小回流，重绘

1. 直接改变className，若是动态改变样式，则使用cssText（考虑没有优化的浏览器）

// 很差的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";// 比较好的写法
el.className += " className1";
 
// 比较好的写法
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

　　

2. 让要操做的元素进行”离线处理”，处理完后一块儿更新

a) 使用DocumentFragment进行缓存操做,引起一次回流和重绘；
b) 使用display:none技术，只引起两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引起一次回流和重绘

3.不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，利用缓存

// 别这样写，大哥
for(循环) {
el.style.left = el.offsetLeft + 5 + "px";
el.style.top = el.offsetTop + 5 + "px";
}
 
// 这样写好点
var left = el.offsetLeft,
top = el.offsetTop,
s = el.style; 
for (循环) { 
left += 10; 
top += 10; 
s.left = left + "px"; 
s.top = top + "px"; 
}

4. 让元素脱离动画流，减小回流的Render Tree的规模

//推荐
$("#block1").animate({left:50});
//不推荐
$("#block2").animate({marginLeft:50});