首页 > 其他 > 详细

innerTHML和createElement效率对比

时间:2021-05-20 00:44:02      阅读:16      评论:0      收藏:0      [点我收藏+]

创建元素的三种方式

技术分享图片

 

 

 

innerHTML字符串拼接方式(效率低)

<script>
   function fn() {
       var d1 = +new Date();
       var str = ‘‘;
       for (var i = 0; i < 1000; i++) {
           document.body.innerHTML += ‘<div style="width:100px; height:2px; border:1px solid blue;"></div>‘;
      }
       var d2 = +new Date();
       console.log(d2 - d1);
  }
   fn();
</script>

createElement方式(效率一般)

<script>
   function fn() {
       var d1 = +new Date();
?
       for (var i = 0; i < 1000; i++) {
           var div = document.createElement(‘div‘);
           div.style.width = ‘100px‘;
           div.style.height = ‘2px‘;
           div.style.border = ‘1px solid red‘;
           document.body.appendChild(div);
      }
       var d2 = +new Date();
       console.log(d2 - d1);
  }
   fn();
</script>

innerHTML数组方式(效率高)

<script>
   function fn() {
       var d1 = +new Date();
       var array = [];
       for (var i = 0; i < 1000; i++) {
           array.push(‘<div style="width:100px; height:2px; border:1px solid blue;"></div>‘);
      }
       document.body.innerHTML = array.join(‘‘);
       var d2 = +new Date();
       console.log(d2 - d1);
  }
   fn();
</script>

 

innerTHML和createElement效率对比

原文:https://www.cnblogs.com/clarehjh/p/14786565.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!