[原创]也谈javascript程序优化问题 [复制链接]

帖子: 291
体力: 1144
威望: 48

发表于 2007-2-5 09:30:36 |显示全部楼层

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

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

innerHTML:

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

西部数码顶级域名注册商39元抢注！

cityvoice　楼主

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

帖子: 291
体力: 1144
威望: 48

发表于 2007-2-5 10:19:25 |显示全部楼层

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

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

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

先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>

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

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

Sheneyan　

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-2-5 10:47:31 |显示全部楼层

关于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>

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

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

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

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

子叶：子乌的叶子
子乌书简

Sheneyan　

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-2-5 10:51:40 |显示全部楼层

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

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

子叶：子乌的叶子
子乌书简

cityvoice　楼主

帖子: 291
体力: 1144
威望: 48

发表于 2007-2-5 10:55:48 |显示全部楼层

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

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

kamildor　

帖子: 2
体力: 14
威望: 0

发表于 2007-2-5 11:35:52 |显示全部楼层

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

Tca4　

禁止发言

帖子: 658
体力: 765
威望: 0

发表于 2007-2-5 13:17:52 |显示全部楼层

......一群怪人

http://music.17kk.net/

davidnick　

初级会员

帖子: 134
体力: 402
威望: 0

发表于 2007-2-5 13:25:23 |显示全部楼层

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

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

http://blog.iyi.cn/david

kamildor　

帖子: 2
体力: 14
威望: 0

发表于 2007-2-5 15:59:30 |显示全部楼层

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

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

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

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

cityvoice　楼主

帖子: 291
体力: 1144
威望: 48

发表于 2007-2-5 16:06:03 |显示全部楼层

第三讲，尽量用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>

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

用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>

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

darkktt　

帖子: 14
体力: 34
威望: 1

发表于 2007-2-6 09:27:12 |显示全部楼层

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

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

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

Sheneyan　

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-2-6 09:52:12 |显示全部楼层

回复 #11 darkktt 的帖子

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

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

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

子叶：子乌的叶子
子乌书简

darkktt　

帖子: 14
体力: 34
威望: 1

发表于 2007-2-6 10:21:07 |显示全部楼层

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

darkktt　

帖子: 14
体力: 34
威望: 1

发表于 2007-2-6 10:23:11 |显示全部楼层

不止上面的问题，每个portlet页面都很复杂，要么是几百个input(都带有自己的行为)，要么是带10几个模拟控件。狂faint中......555

cityvoice　楼主

帖子: 291
体力: 1144
威望: 48

发表于 2007-2-6 10:48:35 |显示全部楼层

楼上说得没错

其实，做程序就是这样，不能一味强调某一方面，有时候我们在获得某一项便利特性得同时比如PORTAL技术，就不得不牺牲另外一些特性，我们要做的就是要尽量平衡各方面得要求。不改变其它性能的情况下，我们应该尽量去优化已有代码，这在大型项目得时候尤其重要，这是做一个好的程序员所应具备得。

bound0　

老饕

版主 

帖子: 6593
体力: 8785
威望: 287

发表于 2007-2-6 11:00:35 |显示全部楼层

如果是大型项目的话，用现成的framework之前一定要先精简，另外能用函数解决的问题就不要用对象。能用内部方法解决的问题尽量用内部方法。能够自己用少量代码解决的问题就不加载第三方的模块。对象缓存池也解决不了同时创建太多对象的问题。有时候要优先考虑面向过程的设计思路。

[Bound0 专题列表]
Pas besoin de gril : l'enfer, c'est les Autres.

mecoming2004　

初级会员

帖子: 14
体力: 55
威望: 0

发表于 2008-10-17 15:21:42 |显示全部楼层

InnerHTML的那段代码写法明显有问题，所以才会慢，根本不能说明问题。简单改一下就算不用array的情况下速度也会提高很多
function init(){
var staDate = new Date();
var str = "";
for(var i=0;i<100;i++){
str +="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
}
container.innerHTML = str;
alert(new Date - staDate);
}

zhiye　

银牌会员

帖子: 419
体力: 1584
威望: 0
居住地: 江苏省南京市

发表于 2008-10-17 16:23:22 |显示全部楼层

各位大侠努力啊！

效率优化！

mypda07　

中级会员

帖子: 152
体力: 305
威望: 2
居住地: 湖南省长沙市

发表于 2008-10-17 17:21:12 |显示全部楼层

"写了几年代码，很少谈到javascript程序的执行效率问题",写了几年了都不怎么注意效率,不应该

yangsongmao　

杨松茂

钻石会员

帖子: 436
体力: 8093
威望: 0

发表于 2009-5-20 20:52:15 |显示全部楼层

呵呵，我能写几年代码呀~~~~~

Ideal efforts`-_-

qqhunter　

中级会员

帖子: 65
体力: 216
威望: 0

发表于 2009-7-7 12:05:34 |显示全部楼层

楼主用 innerHTML和原生createElement的效率对比方法明显是错误的.....innerHTML应该用17那种方法...........如果直接用createElement，你应该建立文档碎片createDocumentFragment,然后再一次性添加，这样会更快。

innerHTML都是最优。

[ 本帖最后由 qqhunter 于 2009-7-7 12:06 编辑 ]