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

更新时间：2008年05月16日 22:41:50 作者：

写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。这节来看看createElement和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 全选注:引入外部Js需再刷新一下页面才能执行]

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

JS实现仿雅虎首页快捷登录入口及导航模块效果
这篇文章主要介绍了JS实现仿雅虎首页快捷登录入口及导航模块效果,涉及JavaScript响应鼠标事件遍历页面元素的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
用javascript编写的第一人称射击游戏
用javascript编写的第一人称射击游戏...
2007-02-02
详解JavaScript类型判断的四种方法
这篇文章主要介绍了JavaScript类型判断的四种方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-10-10
微信小程序实现页面跳转传值以及获取值的方法分析
这篇文章主要介绍了微信小程序实现页面跳转传值以及获取值的方法,结合实例形式总结分析了微信小程序页面跳转及传值的常用操作技巧,需要的朋友可以参考下
2017-12-12
php 解压zip压缩包内容到指定目录的实例
下面小编就为大家分享一篇php 解压zip压缩包内容到指定目录的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
JS事件循环机制event loop宏任务微任务原理解析
这篇文章主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
js 数组 find,some,filter,reduce区别详解
区分清楚Array中filter、find、some、reduce这几个方法的区别，根据它们的使用场景更好的应用在日常编码中。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
JS完成代码前最好对其做5件事
我们不得面对这样一个事实：许多程序员不会规划他们的JS代码。我们经常快速写完代码、运行、提交。但当我们继续开发遇到变量和函数时不得不再次回头查看它们代表的含义，麻烦就从这里开始了。
2013-04-04
JS简单限制textarea内输入字符数量的方法
这篇文章主要介绍了JS简单限制textarea内输入字符数量的方法,涉及JavaScript响应鼠标及键盘事件处理textarea输入框字符的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
javascript实现禁止鼠标滚轮事件
这篇文章主要介绍了javascript实现禁止鼠标滚轮事件的相关资料,需要的朋友可以参考下
2015-07-07