js中。动态加入html的方法大致就是两种,一种是document.createElement等方法创建,然后使用Element.appendChild加入,或者是使用Element.innerHTML = sHTML的方式。两种方法,显然前面一种更加灵活,除了Element.appendChild方法外,还有insertBefore等等其它dom操作方式。这里且不谈灵活性,但就性能做一个探索。

比較的方式非常easy:

各生成10000次形如<div><span>性能測试</span> ......</div>的html,然后一次性放入body中。记录此全过程,耗时时间,并执行10次,输出耗时。

代码例如以下:

	window.onload = function(){
testPerformance(10,function(){
document.body.appendChild(generateHtmlElement(10000));
})
testPerformance(10,function(){
document.body.innerHTML = generateHtmlString(10000);
})
} function testPerformance(iTimes,fn){
var iLastTime = null;
var iTotalTime = 0;
for(var i=1;i<=iTimes;++i){
iLastTime = new Date().getTime();
fn();
var iCost = new Date().getTime() - iLastTime;
console.log("第"+i+"次用时:"+iCost+"毫秒");
iTotalTime+=iCost;
document.body.innerHTML = "";
iLastTime = new Date().getTime();
}
console.log("总用时:"+iTotalTime+"毫秒");
console.log("平均用时:"+iTotalTime/iTimes+"毫秒");
} /*
*使用document.createElement等dom方法生成元素<div><span>測试性能</span>....<div>
*times:生成div的数量
*return Element
*/
function generateHtmlElement(iTimes){
var result = document.createElement("div");
for(var i=0;i<iTimes;++i){
var eDiv = document.createElement("div"); for(var j = 0;j<10;++j){
var eSpan = document.createElement("span");
eSpan.appendChild(document.createTextNode("測试性能"));
eDiv.appendChild(eSpan);
}
result.appendChild(eDiv);
}
return result;
}
/*
*使用字符串拼接的方式生成<div><span>測试性能</span>....<div>字符串
*times:生成div的数量
*return string
*/
function generateHtmlString(iTimes){
var sb = new StringBuilder (); for(var i=0;i<iTimes;++i){
sb.append("<div>");
for(var j = 0;j<10;++j){
sb.append("<span>性能測试</span>");
}
sb.append("</div>");
}
return sb.toString();
} function StringBuilder () {
this.__asBuilder = [];
} StringBuilder.prototype.clear = function(){
this.__asBuilder = [];//这样的写法要比this.__asBuilder.length = 0稍快,快多少。看数组的长度
} StringBuilder.prototype.append = function(){
Array.prototype.push.apply(this.__asBuilder,arguments);//调用Array的push方法,这样调用。使用append,能够传递多个參数
return this;//这样能够实现append("a").append()的效果
} StringBuilder.prototype.toString = function(){
return this.__asBuilder.join("");
}

拼接字符串的过程中,使用了一个自己定义类StringBuilder,以提升字符串拼接性能。

測试结果例如以下:

chrome下,差不太多,innerHTML稍好一些:

Firefox中,innerHTML完爆createElement

IE11,应该说,IE11,被chrome和Firefox完爆了

总结一下,单就性能而言,innerHTML都要比createElement创建元素在append进dom中快一些。在IE下。就差的更远了。话说,IE,你怎么这么慢?。我測试方式有问题么?!

createElement与innerHtml性能比較的更多相关文章

  1. Java中arraylist和linkedlist源代码分析与性能比較

    Java中arraylist和linkedlist源代码分析与性能比較 1,简单介绍 在java开发中比較经常使用的数据结构是arraylist和linkedlist,本文主要从源代码角度分析arra ...

  2. Java里多个Map的性能比較(TreeMap、HashMap、ConcurrentSkipListMap)

    问题 比較Java原生的 1.  TreeMap 2.  HashMap 3.  ConcurrentSkipListMap 3种Map的效率. 结果 模拟150W以内海量数据的插入和查找,通过添加和 ...

  3. Java序列化框架性能比較

    博客: http://colobu.com jvm-serializers提供了一个非常好的比較各种Java序列化的的測试套件. 它罗列了各种序列化框架. 能够自己主动生成測试报告. 我在AWS c3 ...

  4. FlatBuffers与protobuf性能比較

    FlatBuffers发布时.顺便也发布了它的性能数据,详细数据请见Benchmark. 它的測试用例由下面数据构成"a set of about 10 objects containing ...

  5. [轉]redis;mongodb;memcache三者的性能比較

    先说我自己用的情况: 最先用的memcache ,用于键值对关系的服务器端缓存,用于存储一些常用的不是很大,但需要快速反应的数据 然后,在另一个地方,要用到redis,然后就去研究了下redis. 一 ...

  6. java list三种遍历方法性能比較

    从c/c++语言转向java开发,学习java语言list遍历的三种方法,顺便測试各种遍历方法的性能,測试方法为在ArrayList中插入1千万条记录,然后遍历ArrayList,发现了一个奇怪的现象 ...

  7. 作者:wallimn

    经过这几天对DHTMLXTree的折腾总算是有点眉目了.领导催得紧.组长紧的催. 唉,把握这次机会来好好总结一下DHTMLXTree. 还是老套路.首先来简单了解一下DHTMLXTree. DHTML ...

  8. 简单一招实现json数据可视化

    开发一个内部功能时碰到的需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享一 ...

  9. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

随机推荐

  1. maven打包oracle jdbc驱动

    背景 由于版权问题,maven中央仓库缺少oracle jdbc的驱动,这个给开发带来了很多不便利性.也出现各种各样的解决方案,基本就两种思路: 将oracle驱动安装到本地仓库,这个需要大家统一好名 ...

  2. 如何用纯 CSS 创作一个容器厚条纹边框特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...

  3. LINUX:关于Redis集群的节点分配

    文章来源:http://www.cnblogs.com/hello-tl/p/7808268.html 根据上述  Redis集群搭建:http://www.cnblogs.com/hello-tl/ ...

  4. POJ 1979 Red and Black (DFS)

    Description There is a rectangular room, covered with square tiles. Each tile is colored either red ...

  5. 【03】使用 Firebug 调试 JavaScript

    [03] 使用 Firebug 调试 JavaScript 描述 Firebug是一个非常强大的工具,可以帮助您发现代码发现错误的错误并解决错误. 在此我们使用Firebug来处理Javascript ...

  6. 【01】Firebug 教程

    Firebug 教程 什么是 Firebug? Firebug 是一个开源的web开发工具.   现在浏览器自带firebug了.     安装 Firebug Firebug下载地址: https: ...

  7. 【02】koala编译中文出错(已放弃不用)

    http://koala-app.com/index-zh.html koala 下载地址.     sass.中文编译出错: 打开 Koala文件夹位置->rubygems->gems- ...

  8. 在mysql的操作界面中,如何清屏幕

    1.快捷键:Ctrl+L2.通过执行SHELL命令: \! clear实际上 \! 用来执行操作系统的shell命令,不仅是clear,其他命令也可以.shell命令执行完成后,会返回mysql Us ...

  9. E-R图

    百度百科:E-R图 100多个数据库,一万多张表,能否使用一张E-R图来表示呢?它是可以的.数据设计依赖于企业的数据,而不是数据库的设计,对企业数据适当做归类,会直接导致数据设计,最终画出E-R图,数 ...

  10. iOS第三方地图-百度地图中心点定位

    使用百度地图定位后,滑动地图,使用反编码确定地图中心店的位置信息 // // MapControl.m // quyizu // // Created by apple on 15/9/2. // C ...