提高你的DHTML性能
發布時間:2005-09-30來源：本站點擊數:20
[英文原文]msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true[中文譯文]www.microsoft.com/china/msdn/msdnonline/feature...
[英文原文]
msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true
[中文譯文]
www.microsoft.com/china/msdn/msdnonline/features/articles/dhtmlperf.asp
1.盡量使用同一個腳本函數來改變HTML內容。如果有多個事件觸發，盡量只改變同一個地方。
2.盡量把內容集中起來一次更新。如果不是特別需要有HTML的內容，盡量使用innerText代替innerHTML
Slow:
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{
divUpdate.innerHTML += "This is a slower method! ";
}
Fast:
var str="";
for ( var i=0; i<100; i++ )
{
str += "This is faster because it uses a string! ";
}
divUpdate.innerHTML = str;
3.更新文本內容時盡量使用innerText而不是DOM的createTextNode
Slow:
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( " Using createTextNode() " ) );
divUpdate.appendChild( node );
}
Fast:
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = " Using innerText property ";
divUpdate.appendChild( node );
}
4.盡量使用createElement 和 insertAdjacentElement 方法，而不是 insertAdjacentHTML
Slow:
for (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Uses insertAdjacentHTML() " );
}
Fast:
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = " Uses insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", node );
}
5.在數目巨大的情況下，盡量使用innerHTML 來添加項
Slow:
var opt;
divUpdate.innerHTML = "";
for (var i=0; i<1000; i++)
{
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "Item " + i;
}
Fast:
var str="";
divUpdate.innerHTML = str;
Faster:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "";
}
divUpdate.innerHTML = "";
6.使用DOM來創建表格比TOM(insertRow,insertCell)好的多
Slow:
var row;
var cell;
for (var i=0; i<100; i++)
{
row = tblUpdate.insertRow();
for (var j=0; j<10; j++)
{
cell = row.insertCell();
cell.innerText = "Row " + i + ", Cell " + j;
}
}
Fast:
var row;
var cell;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild( tbody );
for (var i=0; i<100; i++)
{
row = document.createElement( "TR" );
tbody.appendChild( row );
for (var j=0; j<10; j++)
{
cell = document.createElement( "TD" );
row.appendChild( cell );
cell.innerText = "Row " + i + ", Cell " + j;
}
}
7.通用的操作，盡量放在一個單獨的外部腳本文件里
8.約束你的動態屬性（指setExpression的用法）
9.使用數據綁定來顯示你的資料，你可以使用排序、過濾等操作來提供不同視圖，但只需要訪問一次服務器(減少頻繁訪問服務器的問題)
10.不要把自定義的屬性加到document對象上，這會使得每次讀取該屬性時進行額外的重算。推薦加在window對象上
Slow:
for (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Item "+i;
tmp = window.document.myProperty;
}
Fast:
for (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "Item "+i;
tmp = window.myProperty;
}
11.盡量直接使用style對象來改變HTML對象外觀，而不是className或者跟clas關聯的styleSheet對象
12.在訪問textrange對象的父對象(指parentElement方法的返回值)時，先collapse合并range，尤其是復;的range
13.先插入對象，然后添加它的內容
Slow
(1).create 文章均為力洋網絡專注網站建設，廣州網站建設的廣州網站建設公司原創，轉載請注明來自http://www.jxhrtz.com/FAQ/107.html
