打印

[原创]也谈javascript程序优化问题

cityvoice [楼主]

中级会员

帖子: 114
体力: 310
威望: 44
离线: 13 天

1^# 大中小发表于 2007-2-5 09:30

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

提示：您可以先修改部分代码再运行

innerHTML:

提示：您可以先修改部分代码再运行

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

cityvoice [楼主]

中级会员

帖子: 114
体力: 310
威望: 44
离线: 13 天

2^# 大中小发表于 2007-2-5 10:19

第二讲：同样是createNode，再来看看执行顺序的差别

先创建子节点，再append到父节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function init(){
	var staDate = new Date();
	var doc = window.document;
	for(var i=0;i<100;i++){
		var oDiv = doc.createElement("div");
		var oTab  = doc.createElement("table");
		var oTbody  = doc.createElement("tbody");
		var oTr = doc.createElement("tr");
		var oTd = doc.createElement("td");
		var oText = doc.createTextNode("毛主席向全世界宣布：中华人民共和国从此成立了");		
		oTd.appendChild(oText);
		oTr.appendChild(oTd);
		oTbody.appendChild(oTr);
		oTab.appendChild(oTbody);
		oDiv.appendChild(oTab);
		container.appendChild(oDiv);
		oDiv.id = "div_"+i;
		oDiv.style.width = "400px";
		oDiv.style.height = "20px";
		oDiv.style.backgroundColor = "#eee";
		
		
	}
	//alert(container.innerHTML);
	alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

先append到父节点，再创建子节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function init(){
	var staDate = new Date();
	var doc = window.document;
	for(var i=0;i<100;i++){
		var oDiv = doc.createElement("div");
		var oTab  = doc.createElement("table");
		var oTbody  = doc.createElement("tbody");
		var oTr = doc.createElement("tr");
		var oTd = doc.createElement("td");
		var oText = doc.createTextNode("毛主席向全世界宣布：中华人民共和国从此成立了");				
		container.appendChild(oDiv);
                                oDiv.appendChild(oTab);
                                oTab.appendChild(oTbody);
                                oTbody.appendChild(oTr);
                                oTr.appendChild(oTd);
                                oTd.appendChild(oText);
		oDiv.id = "div_"+i;
		oDiv.style.width = "400px";
		oDiv.style.height = "20px";
		oDiv.style.backgroundColor = "#eee";
		
		
	}
	//alert(container.innerHTML);
	alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

[ 本帖最后由 cityvoice 于 2007-2-5 10:20 编辑 ]

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

3^# 大中小发表于 2007-2-5 10:47

关于innerHTML...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function test(f){
var d = new Date();
eval(f);
alert((new Date())-d);
}
function _appendChild(){
container.innerHTML = "";
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var oDiv = doc.createElement("div");
var oText = doc.createTextNode("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.id = "div_"+i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
}
function _innerHTML(){
var doc = window.document;
var str = "";
for(var i=0;i<100;i++)
str+="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>";
container.innerHTML = str;
}
</script>
</HEAD>
<BODY>
<input type="button" value="appendChild" onclick="test('_appendChild()');" />
<input type="button" value="innerHTML" onclick="test('_innerHTML()');" />
<div id="container"></div>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

保存成文件再测试速度...在线测试速度和保存成文件测试速度似乎差别很大-.-(在线测试速度innerHTML非常之慢...但是保存成文件之后..innerHTML反而更快.)

cityvoice:你的innerHTML不应该不停地加,而应该一次性赋值,减少系统解析代码的时间.

[ 本帖最后由 Sheneyan 于 2007-2-5 10:49 编辑 ]

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

请大家尊重和保护奥运知识产权。

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

4^# 大中小发表于 2007-2-5 10:51

关于appendChild的先后,其实是牵涉到ie如何为你的代码分配内存的问题.

可以参考这篇关于javascript 内存溢出的文章:
http://www.blogjava.net/tim-wu/archive/2006/05/29/48729.html

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

cityvoice [楼主]

中级会员

帖子: 114
体力: 310
威望: 44
离线: 13 天

5^# 大中小发表于 2007-2-5 10:55

不对吧，即使保存成文件之后，innerHTML也会慢很多

如果是ie用innerText倒是比较块，你说的一次行插入也有问题，也会比较慢，拼接字符串需要花费大量时间，除非你愿意把所有字符串写在一行，那我就没话说了。

TOP

kamildor

新手上路

帖子: 2
体力: 9
威望: 0
离线: 39 天

6^# 大中小发表于 2007-2-5 11:35

如果要插入innerHTML的字符串需要拼接多次，可以用数组来做StringBuffer
var str=[];
str.push("……")
……
div.innerHTML=str.join("");
不过str拼接在字符串数量比较少的时候性能没什么差别，基本上感觉不到拼接时间

TOP

Tca4

禁止发言

帖子: 658
体力: 760
威望: 0
离线: 486 天

7^# 大中小发表于 2007-2-5 13:17

......一群怪人

http://music.17kk.net/

TOP

davidnick

中级会员

帖子: 123
体力: 208
威望: 0
离线: 32 天

8^# 大中小发表于 2007-2-5 13:25

引用:

原帖由 kamildor 于 2007-2-5 11:35 发表
如果要插入innerHTML的字符串需要拼接多次，可以用数组来做StringBuffer
var str=[];
str.push("……")
……
div.innerHTML=str.join("");
不过str拼接在字符串数量比较少的时候性能 ...

没实际测试过拼接字符串的效率，不过感觉用数组应该更慢吧？

http://blog.iyi.cn/david

TOP

kamildor

新手上路

帖子: 2
体力: 9
威望: 0
离线: 39 天

9^# 大中小发表于 2007-2-5 15:59

引用:

原帖由 davidnick 于 2007-2-5 13:25 发表

没实际测试过拼接字符串的效率，不过感觉用数组应该更慢吧？

数组的join方法是内部方法，速度会比用js写的代码调用速度快,
不过在FIREFOX下拼接和用数组就没什么区别了

[ 本帖最后由 kamildor 于 2007-2-5 16:05 编辑 ]

TOP

cityvoice [楼主]

中级会员

帖子: 114
体力: 310
威望: 44
离线: 13 天

10^# 大中小发表于 2007-2-5 16:06

第三讲，尽量用cloneNode代替createNode

还是看例子
用cloneNode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function init(){
	var staDate = new Date();
	var doc = window.document;
	for(var i=0;i<100;i++){
                        if(container.childNodes.length>0){
                                var oDiv = container.lastChild.cloneNode(true);
                                oDiv.id="div_"+i;
                                container.appendChild(oDiv);    
                        }else{
		var oDiv = doc.createElement("div");
		var oTab  = doc.createElement("table");
		var oTbody  = doc.createElement("tbody");
		var oTr = doc.createElement("tr");
		var oTd = doc.createElement("td");
		var oText = doc.createTextNode("毛主席向全世界宣布：中华人民共和国从此成立了");				
		container.appendChild(oDiv);
                                oDiv.appendChild(oTab);
                                oTab.appendChild(oTbody);
                                oTbody.appendChild(oTr);
                                oTr.appendChild(oTd);
                                oTd.appendChild(oText);
		oDiv.id = "div_"+i;
		oDiv.style.width = "400px";
		oDiv.style.height = "20px";
		oDiv.style.backgroundColor = "#eee";
                         }		
		
	}
	//alert(container.innerHTML);
	alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

用createNode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function init(){
	var staDate = new Date();
	var doc = window.document;
	for(var i=0;i<100;i++){
                        //if(container.childNodes.length>0){
                                //var oDiv = container.lastChild.cloneNode(true);
                                //oDiv.id="div_"+i;
                                //container.appendChild(oDiv);    
                        //}else{
		var oDiv = doc.createElement("div");
		var oTab  = doc.createElement("table");
		var oTbody  = doc.createElement("tbody");
		var oTr = doc.createElement("tr");
		var oTd = doc.createElement("td");
		var oText = doc.createTextNode("毛主席向全世界宣布：中华人民共和国从此成立了");				
		container.appendChild(oDiv);
                                oDiv.appendChild(oTab);
                                oTab.appendChild(oTbody);
                                oTbody.appendChild(oTr);
                                oTr.appendChild(oTd);
                                oTd.appendChild(oText);
		oDiv.id = "div_"+i;
		oDiv.style.width = "400px";
		oDiv.style.height = "20px";
		oDiv.style.backgroundColor = "#eee";
                         //}		
		
	}
	//alert(container.innerHTML);
	alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

TOP

darkktt

新手上路

帖子: 14
体力: 29
威望: 1
离线: 580 天

11^# 大中小发表于 2007-2-6 09:27

其实JS优化并只是你说的那些

JS优化包括很多方面，例如减少创建对象的数量，有必要根据实际情况来决定采用哪种策略，有的时候每次调用都去查找对象会比将全部对象缓存更加适合，一个比较明显的例子，当对象数目过多时会导致IE崩溃，在这种况下不去缓存对象是比较正确的做法。所以说不能一味的从技术角度考虑问题。
很多在技术上看来会提高速度的东西，在实际应用中有时候是会造成问题的。

[ 本帖最后由 darkktt 于 2007-2-6 09:30 编辑 ]

TOP

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

12^# 大中小发表于 2007-2-6 09:52

回复 #11 darkktt 的帖子

呵呵，如何在时间（执行效率）和空间（内存占用）上取得一个合适的比例点，这是一个值得研究的问题。

也许有人会觉得js性能不高并不会有太大的影响，象楼主那样，也要把程序重复个100遍才会看出效果。这种想法大大的不好。。每个地方延缓个200-300ms，一个稍微大型的项目，js的代码量都会达到百k级，各个点性能的降低会严重影响整个项目的运行。。最近是深有体会－。－

to darkktt：不过使用对象缓存池就能减轻你所说的这种由于对象太多引起的crash

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

darkktt

新手上路

帖子: 14
体力: 29
威望: 1
离线: 580 天

13^# 大中小发表于 2007-2-6 10:21

事实上使用JS的时候问题很多，比如说我正在使用的xforms，目前还没有比较好的浏览器支持(FF支持但是效果不好)，所以用JS来模拟，直接后果是会使用大量的 JS，而我们又使用portlet，你想象一下，一个页面会打开3-4个portlet，每个portlet都加载300-400K的JS，同时portlet框架(我们用的是lifery)还有100-200K的JS，上面的3-4个是保守估计，so...。我整天都快被这些东西搞疯了。