提高你的DHTML性能

轉自 http://www.blueidea.com/tech/web/2003/1161.asp

資料來源：MSDN
[英文原文]
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 += "<SPAN>This is a slower method! </SPAN>";
}

Fast:
var str="";
for ( var i=0; i<100; i++ )
{
  str += "<SPAN>This is faster because it uses a string! </SPAN>";
}
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", "<SPAN> Uses insertAdjacentHTML() </SPAN>" );
}

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 = "<SELECT ID='selUpdate'></SELECT>";
for (var i=0; i<1000; i++)
{
  opt = document.createElement( "OPTION" );
  selUpdate.options.add( opt );
  opt.innerText = "Item " + i;
}

Fast:
var str="<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i++)
{
  str += "<OPTION>Item " + i + "</OPTION>";
}
str += "</SELECT>";
divUpdate.innerHTML = str;



Faster:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
  arr[i] = "<OPTION>Item " + i + "</OPTION>";
}
divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "</SELECT>";

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 <TR>
(2).create <TD>

(3)create TextNode
(4)insert TextNode into <TD>
如前所述，這裏用innerText會更快

(5)insert <TD> into <TR>
(6)insert <TR> into TBODY

Fast
(1)create <TR>
(2)create <TD>

(3)create TextNode
如前所述，這裏用innerText會更快

(4)insert <TR> into TBODY
(5)insert <TD> into <TR>

(6)insert TextNode into <TD>
如前所述，這裏用innerText會更快

14.用posLeft,posTop,posWidth,posHeight來代替left,top等，減少字符串->數值的轉換

15.儘可能少的使用定時器(指setTimeout,setInterval這些)，而在同一個定時器裏對所有要變化的對象進行操作