javascript程序的执行效率问题

来源:不详时间:08-05-13 点击: 点击这里收藏本文

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

运行代码框
<!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 oText = 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(new Date - staDate); } </script> </HEAD> <BODY> <div id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

innerHTML:

第二讲：同样是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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

9 7 3 1 2 4 8 :

广而告之

文章搜索

Google JZxue.Com

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册

javascript程序的执行效率问题

相关教程

广而告之

文章搜索

最新文章

推荐导读

热门排行