动态修改dom node的两种方法性能比较

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个节点:

当个数增加到1000个时:

个数10000个时:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":
汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页