javascript程序的執行效率問題

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript程序的執行效率問題

javascript程序的執行效率問題

編輯：關於JavaScript

寫了幾年代碼，很少談到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:

運行代碼框
<!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 str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>"; container.innerHTML += str; } alert(new Date - staDate); } </script> </HEAD> <BODY> <div id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

第二講：同樣是createNode，再來看看執行順序的差別

先創建子節點，再append到父節點：

上一頁:JavaScript圖片特效代碼下載
下一頁:網頁用戶注冊界面的設計

關於JavaScript

Bootstrap實現導航欄的2種方式: 前言：導航是一個網站重要的元素組件之一，可以便於用戶查找網站所提供的各項功能服務。導航的制作方法也是
Atitit.js的鍵盤按鍵事件捆綁and事件調度: 1. Best的方法還是objEvtMap[ id+evt ]=function(evt
簡單實現js浮動框: 本文實例為大家分享了js浮動框的實現代碼，供大家參考，具體內容如下一.在需要加入浮動框的頁面中加入如

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章