最近遇到js的效率问题,是关于在页面中新增元素的问题;
假设:我们有页面如下
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><HTML>
<HEAD>
</HEAD>
<BODY>
<divid="div1"></div>
</BODY>
<script>
//脚本位置
</script>
</HTML>
现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如下代码:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->
// 方法1
div1.innerHTML='<ahref="">测试</a>';
或者:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->
// 方法2
vara=document.createElement('a');
a.innertText='测试';
div1.appendChild(a);
在网上搜索到一个探讨js效率问题的文章,其大概意思是说方法2的效率高,其对比代码如下
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->//方法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);
}
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->//方法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);
}
其页面中有:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><divid="container"></div>
<inputtype="button"value="start"onclick="init();"/>
从执行效果来看方案2要比方案1快10倍左右,到底这是不是真的呢?其实上面的测试代码是有待商榷的,且看其方法1中的循环代码:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->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的性能,于是写了下面的测试代码
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><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>
经测试发现:
- 在创建的对象较少(0-大约10左右)时,innerHTML和createElement效率差不多,测试值悠忽不定
- 在创建对象多于20时,innerHTML要比createElement效率高很多,平均测试差不多createElement耗时是innerHTML的两倍。
总结:其实效率也在于编写的代码,在知道可用的API的效率后,怎么编写代码也是非常重要的,否则应由的执行效率不能体现出来,就如上面从网上搜到的那些代码,得出一个与事实相悖的结论。
分享到:
相关推荐
专题资料(2021-2022年)javascript效率经验谈.docx
主要介绍了JavaScript中for循环的效率问题及相关优化,文中谈到了Underscore.js库及循环在各个浏览器js解释器下的表现,需要的朋友可以参考下
以往,单元测试往往多见于服务端的开发中,但随着Web编程领域的分工逐渐明细,在前端Javascript开发领域中,也可以进行相关的单元测试,以保障前端开发的质量。 在服务器端的单元测试中,都有各种各样的测试框架,在...
写了几年代码,很少谈到javascript程序的执行效率问题,今天就举几个例子看看,让大家看看程序优化是多么重要。这节来看看createElement和innerHTML的表现。看看差别是多大
通过将各种可重用代码编写在各种模块中的方法,可以大大减少应用程序的代码量,提高应用程序的开发效率以及应用程序代码的可读性。通过模块加载机制,可以将各种第三方模块引入到我们的应用程序中。 在node.js中,...
细节33 对象也能排序 细节34 实现IDisposable接口清除对象 细节35 将字符串转为字符数组 细节36 将字符数组写入到字符串 细节37 使用var创建隐型局部变量 细节38 Lambda表达式 细节39 生成缩略图的方法 细节40 使用...
JavaScript PHP iOS Android HTML5 CSS3 Linux C++ Python C# Node.Js 一文让你彻底理解 Java HashMap 和 ConcurrentHashMap 2018-07-25 分类:JAVA开发、编程开发、首页精华0人评论 来源:...
也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面关键字 网站首页的自动语言切换 应用系统的多语言支持 (一) 应用系统的多语言支持 (二) 自动...
而通过配置文件,不管这样的一个配置文件的结构如何好,也需要在其中查找自己需要的内容,开发效率肯定要低一些。 因此对于这种有创新性的轮子,多几个,或许Java世界可以跑得更快一些。 去年就听说不少Web...
C 删掉一部分调试一部分,也就是去掉一部分的功能,做简化,然后调试剩下的功能,JSP和JavaScript常用。 4:如果还不行,google吧 还查不出来?恭喜你,你遇到的错误是值得认真对待的错误,是会影响你学习生涯的...
javascript效率测试.............................................. 19 SMARTY结合AJAX无刷新留言本实例解析.............................. 24 安全优化.......................................................