javascript程序優(yōu)化問題

更新時間：2008年05月16日 22:41:50 作者：

寫了幾年代碼，很少談到javascript程序的執(zhí)行效率問題，今天就舉幾個例子看看，讓大家看看程序優(yōu)化是多么重要。這節(jié)來看看createElement和innerHTML的表現(xiàn)?？纯床顒e是多大

第三講，盡量用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   class="twrd7qj"   id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

用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   class="5rdpz2a"   id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

一文帶你搞懂面試率超高的JS事件循環(huán)
事件循環(huán)是?JavaScript?中一個非常重要的概念，下面就來看看瀏覽器和?Node.js?中的事件循環(huán)的原理，以及兩者之間的差異，感興趣的可以了解一下
2022-10-10
js 目錄列舉函數(shù)
用js獲取文件目錄的代碼，一般主要是用了區(qū)別vbs的一些代碼
2008-11-11
ES6記錄異步函數(shù)的執(zhí)行時間詳解
在這篇文章里，我會實現(xiàn)一個可重用的函數(shù)來處理 JavaScript 延時異步操作。有需要的小伙伴們可以參考借鑒，下面來一起看看。
2016-08-08
JavaScript實現(xiàn)DIV層拖動及動態(tài)增加新層的方法
這篇文章主要介紹了JavaScript實現(xiàn)DIV層拖動及動態(tài)增加新層的方法,設計javascript操作div層的拖動與增加的相關技巧,需要的朋友可以參考下
2015-05-05
JavaScript立即執(zhí)行函數(shù)IIFE的用法詳解
在JavaScript開發(fā)中,立即執(zhí)行函數(shù)（Immediately Invoked Function Expression,簡稱IIFE）是一種非常實用的設計模式,本文將深入探討IIFE的基本概念、作用以及實際應用場景,并通過多個示例幫助開發(fā)者更好地掌握這一技術,需要的朋友可以參考下
2025-02-02
JavaScript監(jiān)聽手機物理返回鍵的兩種解決方法
JavaScript沒有監(jiān)聽物理返回鍵的API，所以只能使用 popstate 事件監(jiān)聽。接下來通過本文給大家分享JavaScript監(jiān)聽手機物理返回鍵的兩種解決方法，感興趣的朋友一起看看吧
2017-08-08
使用Modello編寫JavaScript類
使用Modello編寫JavaScript類...
2006-12-12
純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局（實例代碼）
這篇文章主要介紹了純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下
2017-10-10
Javascript字符串常用方法詳解
這篇文章主要介紹了Javascript字符串常用方法詳解的相關資料,在平時工作中經(jīng)常會用到的，非常不錯，需要的朋友可以參考下
2016-07-07
javascript面向?qū)ο笕筇卣髦庋b實例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡單描述了封裝的基本概念、原理,并結(jié)合實例形式詳細分析了javascript面向?qū)ο蟪绦蛟O計中封裝的用法與相關操作注意事項,需要的朋友可以參考下
2019-07-07