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事件循环
事件循环是 JavaScript 中一个非常重要的概念，下面就来看看浏览器和 Node.js 中的事件循环的原理，以及两者之间的差异，感兴趣的可以了解一下
2022-10-10
js 目录列举函数
用js获取文件目录的代码，一般主要是用了区别vbs的一些代码
2008-11-11
ES6记录异步函数的执行时间详解
在这篇文章里，我会实现一个可重用的函数来处理 JavaScript 延时异步操作。有需要的小伙伴们可以参考借鉴，下面来一起看看。
2016-08-08
JavaScript实现DIV层拖动及动态增加新层的方法
这篇文章主要介绍了JavaScript实现DIV层拖动及动态增加新层的方法,设计javascript操作div层的拖动与增加的相关技巧,需要的朋友可以参考下
2015-05-05
JavaScript立即执行函数IIFE的用法详解
在JavaScript开发中,立即执行函数（Immediately Invoked Function Expression,简称IIFE）是一种非常实用的设计模式,本文将深入探讨IIFE的基本概念、作用以及实际应用场景,并通过多个示例帮助开发者更好地掌握这一技术,需要的朋友可以参考下
2025-02-02
JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。接下来通过本文给大家分享JavaScript监听手机物理返回键的两种解决方法，感兴趣的朋友一起看看吧
2017-08-08
使用Modello编写JavaScript类
使用Modello编写JavaScript类...
2006-12-12
纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）
这篇文章主要介绍了纯html+css+javascript实现楼层跳跃式的页面布局,需要的朋友可以参考下
2017-10-10
Javascript字符串常用方法详解
这篇文章主要介绍了Javascript字符串常用方法详解的相关资料,在平时工作中经常会用到的，非常不错，需要的朋友可以参考下
2016-07-07
javascript面向对象三大特征之封装实例详解
这篇文章主要介绍了javascript面向对象三大特征之封装,简单描述了封装的基本概念、原理,并结合实例形式详细分析了javascript面向对象程序设计中封装的用法与相关操作注意事项,需要的朋友可以参考下
2019-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具