CrazyDo
浏览器解释HTML时最耗时的部分是Reflow（回流），而当JS操作DOM的时候就会引发浏览器的Reflow，因此减少操作DOM的次数可以提高性能。
当需要操作DOM时，比如在一个div中添加n个div，我们可能这样操作：
[javascript]var ctrl = document.getElementById("mainContainer");
for (var i = 0; i < 100; i++) {
var child = document.createElement("div");
ctrl.appendChild(child);
}[/javascript]
或者
[js]var ctrl = document.getElementById("mainContainer");
var inner = ""
for (var i = 0; i < 100; i++) {
inner += "<div></div>";
}[/js]
ctrl.innerHTML = inner;
乍一看，第一种方法直接操作DOM，省去了HTML->DOM的Parse过程，但是每次执行appendChild，就要Reflow一次，而第二种方法，相当于一次性操作DOM，只有一次Reflow，而且目前大部分浏览器对于Parse的过程都有优化，因此性能开销十分小。实测添加10000个div，第一种方法在160ms左右，第二中方法只要50ms左右。
———————————————–
spllot：如果我没记错的话,使用innerHTML,有些情况下是不怎么好的.能不能分析下使用innerHTML的好处与坏处
———————————————-
joehust：更复杂的情况呢？我比较喜欢用innerHTML直接设置，不过有人提醒过我说有一部分我写的代码太慢了，换成了分步的dom操作，
是否在所有情况下都是直接修改innerHTML更快呢？
———————————————
CrazyDo：一般来说，如果innerHTML里面嵌套关系过于复杂的时候建议先createElement创建儿子节点，然后在其中appendChild加入孙子节点，以此类推，最后将儿子节点加入父亲节点，这样在Firefox下也是一次Reflow，但是IE下似乎还是多次Reflow。
———————————————
joehust：很多时候再构造页面的时候其实是先将内容拼好，再append到某个节点下面去，在拼接过程中应该是不会有reflow的，这个时候用dom语句去构造就会省去parse html的过程，速度应当快些，如果是对已经呈现出来的页面进行修改的话可以考虑先将其hide，或者移除，等修改完成后再添加回去，这样可以避免修改的过程中发生reflow，从而提高效
率吧
