参考链接http://www.cnblogs.com/hyddd/archive/2013/02/07/2908960.html
在web应用中我们总是希望变化的数据可以实时反映到ui上，这时就需要进行dom操作，而复杂或频繁的dom操作会带来瓶颈问题
一， 穿插一个小问题关于dom操作：一般dom树都比较大，而dom的修改会导致页面重
绘（repaint）,重新排版（reflow）;机会所有的浏览器会把dom操作放在队列中，直到js脚本执行完毕后才会按照顺序执行，这样就会导致用户操作阻塞。一般的浏览器(ie除外)中repaint的速度要远大于reflow所以要避免reflow。
二，导致repaint和reflow的操作（这些操作具体的细分还没搞清楚）
- 、dom的添加，修改，删除
- 、修改字体颜色（只会导致repaint）
- 、应用新样式或任何影响元素外观的属性
- 、resize浏览器窗口，滚动页面
- 、读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)）
三，如何减少reflow操作
1, 在dom外执行尽量多的dom操作
// 不好的做法
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);
}
// 更好的做法
// 使用容器存放临时变更， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
fragment.appendChild(item);
}
list.appendChild(fragment);
2, 操作dom前，先把dom节点删除或隐藏，隐藏的节点不会触发重排
3, 一次性修改样式（使用class）
如：
// 不好的做法
// 这种做法会触发多次重排
element.style.backgroundColor = "blue";
element.style.color = "red";
element.style.fontSize = "12em";
// 更好的做法是，把样式都放在一个class下
.newStyle {
background-color: blue;
color: red;
font-size: 12em;
}
element.className = "newStyle";
4,使用缓存，缓存临时节点
// 不好的做法
document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft +
document.getElementById("myDiv").offsetWidth + "px";
// 更好的做法
var myDiv = document.getElementById("myDiv");
myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";
5为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。
6千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
网友评论