如何提高你的DHTML性能？

[英文原文] msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true [中文譯文] www.microsoft.com/china/msdn/msdnonline/features/articles/dhtmlperf.asp

1.盡量使用同一個腳本函數(shù)來改變HTML內(nèi)容。如果有多個事件觸發(fā)，盡量只改變同一個地方。

2.盡量把內(nèi)容集中起來一次更新。如果不是特別需要有HTML的內(nèi)容，盡量使用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.更新文本內(nèi)容時盡量使用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.在數(shù)目巨大的情況下，盡量使用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=""; for (var i=0; i<1000; i++) { str += "Item " + i + ""; } str += ""; divUpdate.innerHTML = str; Faster: var arr = new Array(1000); for (var i=0; i<1000; i++) { arr[i] = "Item " + i + ""; } divUpdate.innerHTML = "" + arr.join() + ""; 6.使用DOM來創(chuàng)建表格比TOM(insertRow,insertCell)好的多 Slow: var row; var cell; for (var i=0; i<10
0; 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.約束你的動態(tài)屬性（指setExpression的用法） 9.使用數(shù)據(jù)綁定來顯示你的資料，你可以使用排序、過濾等操作來提供不同視圖，但只需要訪問一次服務(wù)器(減少頻繁訪問服務(wù)器的問題) 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關(guān)聯(lián)的styleSheet對象 12.在訪問textrange對象的父對象(指parentElement方法的返回值)時，先collapse合并range，尤其是復(fù)雜的range 13.先插入對象，然后添加它的內(nèi)容 Slow (1).create (2).create (3)create TextNode (4)insert TextNode into 如前所述，這里用innerText會更快 (5)insert into (6)insert into TBODY Fast (1)create (2)create (3)create TextNode 如前所述，這里用innerText會更快 (4)insert into TBODY (5)insert into (6)insert TextNode into 如前所述，這里用innerText會更快 14.用posLeft,posTop,posWidth,posHeight來代替left,top等，減少字符串->數(shù)值的轉(zhuǎn)換 15.盡可能少的使用定時器(指setTimeout,setInterval這些)，而在同一個定時器里對所有要變化的對象進行操作