欢迎光临
我的个人博客网站

JavaScript innerTHML和createElement效率对比


前言:

在DOM节点操作中,innerTHML和createElement都可以实现创建元素。它们实现的功能类似,但是效率却相差很大。本文分别统计用innerTHML字符串拼接方式、innerTHML数组方式和createElement方式创建1000次元素的时间,来比较它们之间效率的高低。

比较思路:

  1. 使用new调用创建日期对象
  2. 完成1000次创建相同元素后的时间,减去创建之前的时间,即为过程所用的时间(单位:ms)
  3. 比较三种方式所用的时间

比较过程:

1. innerTHML字符串拼接方式

代码:

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(); 

所用时间:
(刷新页面测试3次)
JavaScript innerTHML和createElement效率对比
JavaScript innerTHML和createElement效率对比
JavaScript innerTHML和createElement效率对比

2. innerTHML数组方式

代码:

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(); 

所用时间:
(刷新页面测试3次)
JavaScript innerTHML和createElement效率对比
JavaScript innerTHML和createElement效率对比
JavaScript innerTHML和createElement效率对比

3. createElement方式

代码:

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(); 

所用时间:
(刷新页面测试3次)
JavaScript innerTHML和createElement效率对比
JavaScript innerTHML和createElement效率对比
JavaScript innerTHML和createElement效率对比

总结:

  1. 显然,三种方式所用的时间:
    innerTHML字符串拼接方式 >> createElement方式 > innerTHML数组方式
  2. 则三种方式的效率高低:
    innerTHML数组方式 > createElement方式 > innerTHML字符串拼接方式
  3. 可以根据实际情况需要,选择合适的方式
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript innerTHML和createElement效率对比
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏