HTML/CSS 订阅所有【HTML/CSS】的日志

提高你的DHTML性能

编辑:dnawo 日期:2007-01-09

字体大小: 小 中 大
资料来源：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这些)，而在同一个定时器里对所有要变化的对象进行操作

上一篇: JavaScript 实现动态增加、删除表单域四例
下一篇: insertAdjacentHTML用法及例子
文章来自: 蓝色理想
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 1 | 引用: 0 | 查看次数: 3956
发表评论
请登录后再发表评论！