`
icheng
  • 浏览: 821634 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
文章分类
社区版块
存档分类
最新评论

Javascript createElement和innerHTML增加页面元素的使用对比

 
阅读更多

最近遇到js的效率问题,是关于在页面中新增元素的问题;

假设:我们有页面如下

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> --><HTML>
<HEAD>
</HEAD>
<BODY>
<divid="div1"></div>
</BODY>
<script>
//脚本位置
</script>
</HTML>

现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如下代码:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> -->

// 方法1

div1.innerHTML='<ahref="">测试</a>';

或者:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> -->

// 方法2

vara=document.createElement('a');

a.innertText='测试';
div1.appendChild(a);

在网上搜索到一个探讨js效率问题的文章,其大概意思是说方法2的效率高,其对比代码如下

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> -->//方法1
functioninit(){
varstaDate=newDate();
vardoc=window.document;
for(vari=0;i<100;i++){
varstr="<divid='div_'"+i+"'style='width:100px;height:20px;background-color:#eee'>test</div>";
container.innerHTML
+=str;
}
alert(
newDate-staDate);
}
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> -->//方法2
functioninit(){
varstaDate=newDate();
vardoc=window.document;
for(vari=0;i<100;i++){
varoDiv=doc.createElement("div");
varoText=doc.createTextNode("text");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.style.id
="div_"+i;
oDiv.style.width
="100px";
oDiv.style.height
="20px";
oDiv.style.backgroundColor
="#eee";
}
alert(
newDate-staDate);
}

其页面中有:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> --><divid="container"></div>
<inputtype="button"value="start"onclick="init();"/>

从执行效果来看方案2要比方案1快10倍左右,到底这是不是真的呢?其实上面的测试代码是有待商榷的,且看其方法1中的循环代码:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> -->for(vari=0;i<100;i++){
varstr
="<divid='div_'"+i+"'style='width:100px;height:20px;background-color:#eee'>test</div>";
container.innerHTML+=str;
}

其中有很多字符串操作,而且除了使用+号来连接字符串外,还使用了+=操作符,这就是问题的所在了,在javascript中这种操作字符串的做法是严重影响效率的,所以使用上面的方法来测试createEmenent和innerHTML的效率对innerHTML是不公平的, 据此看来很可能是字符串操作吃掉了innerHTML的性能,于是写了下面的测试代码

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> <a href="http://www.CodeHighlighter.com/" target="_blank">http://www.CodeHighlighter.com/</a><br /> <br /> --><HTML>
<HEAD>
</HEAD>
<BODY>
<inputtype="button"value="测试1"onclick="test1()"/><inputtype=textreadonlyid=t1>
<inputtype="button"value="测试2"onclick="test2()"/><inputtype=textreadonlyid=t2>
<inputtype="button"value="清空"onclick="div1.innerHTML='';div2.innerHTML='';t1.value='';t2.value='';"/>
<divid="div1"></div>
<divid="div2"></div>
</BODY>
<script>
functiontest1()
{
vard=newDate();
varbuf=newArray();
for(varn=0;n<1000;n++)
{
buf.push(
'<ahref="">测试');
buf.push(n);
buf.push(
'</a>');
}

div1.innerHTML
=buf.join('');

t1.value
='耗时:'+(newDate()-d);
}

functiontest2()
{
vard=newDate();
for(varn=0;n<1000;n++)
{
vare=document.createElement('a');
e.href
='';
e.innerText
='测试'+n;
div2.appendChild(e);
}

t2.value
='耗时:'+(newDate()-d);
}
</script>
</HTML>

经测试发现:

  1. 在创建的对象较少(0-大约10左右)时,innerHTML和createElement效率差不多,测试值悠忽不定
  2. 在创建对象多于20时,innerHTML要比createElement效率高很多,平均测试差不多createElement耗时是innerHTML的两倍。

总结:其实效率也在于编写的代码,在知道可用的API的效率后,怎么编写代码也是非常重要的,否则应由的执行效率不能体现出来,就如上面从网上搜到的那些代码,得出一个与事实相悖的结论。

来自:http://qsfwy.javaeye.com/blog/241312

分享到:
评论

相关推荐

    Javascript createElement和innerHTML增加页面元素的性能对比

    Javascript之createElement和innerHTML增加页面元素的性能对比

    javascript 异步的innerHTML使用分析

    利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用,大数据的datagrid屡见不鲜,就算是innerHTML也捉襟见肘,于是人们又开发了分时加载的技术了(利用setTimeout)。

    javascript中innerText和innerHTML属性用法实例分析

    本文实例讲述了javascript中innerText和innerHTML属性用法。分享给大家供大家参考。具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个...

    using自动使用JSX构建DOM元素-JavaScript开发

    使用JSX构建常规DOM元素使用dom-chef,您可以使用Babel或TypeScript将JSX转换为普通的旧DOM元素,而无需使用不安全的innerHTML或笨拙的document.createElement调用。 它支持使用JSX构建常规DOM元素借助dom-chef,您...

    javascript函数的解释

    28.创建一个文档元素:document.createElement(),document.createTextNode() 29.得到元素的方法:document.getElementById() 30.设置表单中所有文本型的成员的值为空: var form = window.document.forms[0] for (var i...

    ASP.ENT中应用javascript分页

    div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素 document.getElementById("all").appendChild(div);//加入all中 if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出 break } var ye="

    fewpjs-removing-altering-and-inserting-html-lab-v-000

    删除或插入选定的元素和/或 调整所选元素的属性 您已经了解了DOM,并拥有了用于选择正确元素的强大工具。 现在,您要了解创建新节点,删除节点和更新节点属性的知识。 以编程方式创建DOM元素 document.createElement...

    fewpjs-removing-altering-and-inserting-html-lab-online-web-sp-000

    删除或插入选定的元素和/或 调整所选元素的属性 您已经了解了DOM,并拥有了用于选择正确元素的强大工具。 现在,您要了解创建新节点,删除节点和更新节点属性的知识。 以编程方式创建DOM元素 document.createElement...

    fewpjs-removing-altering-and-inserting-html-lab-onl01-seng-ft-041320

    您将执行以下操作: 要求DOM在呈现的页面中找到一个HTML元素或多个HTML元素删除或插入选定的元素和/或调整所选元素的属性您已经了解了DOM,并拥有了用于选择正确元素的强大工具。 现在,您要了解创建新节点,删除...

    jQuery详细教程

    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一...

    107个常用javascript语句

    57.innerHTML的值是表单元素的值:如&lt;p id="para"&gt;"how are &lt;em&gt;you&lt;/em&gt;",则innerHTML的值就是:how are &lt;em&gt;you 58.innerTEXT的值和上面的一样,只不过不会把这种標记显示出来. 59.contentEditable可设置元素是否可被...

    javascript 包裹节点 提高效率

    1,createElement,IE可以连元素属性也一起创建,但只能创建一层。2,innerHTML,不过需要对原来的字符串进行处理,IE与FF都有许多意想不到的默认行为,可以为你多加一点东西或少加一点东西。3,...

    JavaScript+div 半透明弹出层

    JavaScript+div 半透明弹出层,function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层 var newDiv...

    JavaScript实现自动生成网页元素功能(按钮、文本等)

    创建元素的方法: 1、利用createTextNode()创建一个文本对象 2、利用createElement()创建一个标签对象 3、直接利用容器标签中的一个属性:innerHTML—–本质上改该标签容器中的“html代码”,不是我们认为的对象...

    phase-0-the-dom-modifying-elements-lab

    创建和插入DOM节点实验学习目标以编程方式创建DOM元素向DOM添加元素使用innerHTML更新元素更改DOM节点上的属性从DOM中删除元素介绍现在您已经了解了DOM和用于选择正确元素的强大工具,现在该学习如何:创建新节点,...

    javascript程序优化问题第1/3页

    写了几年代码,很少谈到javascript程序的执行效率问题,今天就举几个例子看看,让大家看看程序优化是多么重要。这节来看看createElement和innerHTML的表现。看看差别是多大

    JavaScript Table行定位效果

    1,如果是根元素、body元素或元素的position是fixed,将返回null; 2,如果是area元素,会返回最接近的map元素; 3,返回至少符合以下一个条件的最接近该节点的元素:1,元素的position不是static;2,是body元素;3...

    javascript转换字符串为dom对象(字符串动态创建dom)

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement(‘div’); 然后再给obj设置一些属性。 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪...

Global site tag (gtag.js) - Google Analytics