• 丰搜首页
• 文档中心
• 视频中心
• 丰搜贴吧
• 问题集锦
• 更多功能

选择显示字体大小

• 最大
• 较大
• 标准

提高你的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;

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这些)，而在同一个定时器里对所有要变化的对象进行操作

 

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

标准 网站致力的规范