提高你的DHTML性能

 资料来源：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;

    //不是特别需要有HTML的内容 str  += "This is faster because it uses a string!";

    //divUptate.innerText = str; 直接打出这个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这些)，而在同一个定时器里对所有要变化的对象进行操作

出处：蓝色理想