如何提高你的DHTML性能？

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

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

2.盡量把內容集中起來(lái)一次更新。如果不是特別需要有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.更新文本內容時(shí)盡量使用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 來(lái)添加項 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來(lái)創(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.通用的操作，盡量放在一個(gè)單獨的外部腳本文件里 8.約束你的動(dòng)態(tài)屬性（指setExpression的用法） 9.使用數據綁定來(lái)顯示你的資料，你可以使用排序、過(guò)濾等操作來(lái)提供不同視圖，但只需要訪(fǎng)問(wèn)一次服務(wù)器(減少頻繁訪(fǎng)問(wèn)服務(wù)器的問(wèn)題) 10.不要把自定義的屬性加到document對象上，這會(huì )使得每次讀取該屬性時(shí)進(jìn)行額外的重算。推薦加在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對象來(lái)改變HTML對象外觀(guān)，而不是className或者跟clas關(guān)聯(lián)的styleSheet對象 12.在訪(fǎng)問(wèn)textrange對象的父對象(指parentElement方法的返回值)時(shí)，先collapse合并range，尤其是復雜的range 13.先插入對象，然后添加它的內容 Slow (1).create (2).create (3)create TextNode (4)insert TextNode into 如前所述，這里用innerText會(huì )更快 (5)insert into (6)insert into TBODY Fast (1)create (2)create (3)create TextNode 如前所述，這里用innerText會(huì )更快 (4)insert into TBODY (5)insert into (6)insert TextNode into 如前所述，這里用innerText會(huì )更快 14.用posLeft,posTop,posWidth,posHeight來(lái)代替left,top等，減少字符串->數值的轉換 15.盡可能少的使用定時(shí)器(指setTimeout,setInterval這些)，而在同一個(gè)定時(shí)器里對所有要變化的對象進(jìn)行操作