动态修改dom node的两种方法性能比较<script src="C:\Users\i042416\Desktop\j

Created by Jerry Wang, last modified on Sep 25, 2014

测试代码:

<html>
<script src="C:\Users\i042416\Desktop\jquery_1.7.1.js">
</script>
<script>
  function insert1(number) {
   var parent = $("#way1");
   for( var i = 0 ; i < number; i++) {
   parent.append("<p>hh</p>");
   }
  }
  function insert2(number) {
   var parent = $("#way2");
   var content = "<div>way2";
   while(number--) {
   content += "<p>hh</p>";
   }
   content += "</div>";
   parent.html(content);
  }
  $(document).ready(function() {
   console.time("way1");
   insert1(1);
   console.timeEnd("way1");
   console.time("way2");
   insert2(1);
   console.timeEnd("way2");
  });
</script>
<body>
 <div id = "way1">way1</div>
 <div id = "way2">way2</div>
</body>
</html>

方法1在每一次循环里都会修改一次dom node，而方法2只有在循环结束后才进行唯一的一次dom node修改。
在动态插入子node p的个数很小的情况下，两种方法性能相差无几。
插入100个节点:
clipboard1
当个数增加到1000个时:
在这里插入图片描述

个数10000个时:

clipboard3