提高你的DHTML性能 改变一些习惯

原创 2004年10月08日 14:29:00

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

提高你的DHTML性能

转自 http://www.blueidea.com/tech/web/2003/1161.asp资料来源:MSDN[英文原文] msdn.microsoft.com/library/en-us/dn...
  • cottonsky
  • cottonsky
  • 2007年01月22日 10:18
  • 759

提高你的DHTML性能

 资料来源:MSDN[英文原文] msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true[中文译文]www.mi...
  • lin49940
  • lin49940
  • 2007年07月30日 10:45
  • 752

心若改变,态度就会改变;态度改变,习惯就改变;习惯改变,人生就会改变

很久很久以前,人类都还赤着双脚走路。有一位国王到某个偏远的乡间旅行,因为路面崎岖不平,有很多碎石头,刺得他的脚又痛又麻。回到王宫后,他下了一道命令,要将国内的所有道路都铺上一层牛皮。他认为这样做,不只...
  • u013440660
  • u013440660
  • 2014年10月15日 16:39
  • 388

提高JAVA的性能的几种方法

提高JAVA的性能,一般考虑如下的四个主要方面: (1) 程序设计的方法和模式 一个良好的设计能提高程序的性能,这一点不仅适用于JAVA,也适用也任何的编程语言。因为它充分利用了各种资源,如内存,...
  • luqin1988
  • luqin1988
  • 2012年09月13日 17:07
  • 2288

Python网络数据采集10:采集JavaScript

客户端脚本语言是运行在浏览器而非服务器上的语言。客户端语言成功的前提是浏览器拥有正确地解释和执行这类语言的能力。     在一定程度上,由于很难让所有浏览器开发商都认可同一个标准,所以客户端语言比服...
  • QFire
  • QFire
  • 2017年12月29日 20:08
  • 102

DHTML 大全

方法add向 areas, controlRange 或 options 集合中添加一个元素。add创建一个新的 namespace 对象并将其添加到集合中。addBehavior给元素附加一个行为。...
  • helanye
  • helanye
  • 2009年07月11日 22:45
  • 2662

提高 DHTML 页面性能

摘要:本文说明了某些 DHTML 功能对性能的重大影响,并提供了一些提高 DHTML 页面性能的技巧。目录简介成批处理 DHTML 更改使用 innerText使用 DOM 添加单个元素扩展 SELE...
  • KrautCoffee
  • KrautCoffee
  • 2006年12月26日 09:07
  • 782

解构推荐系统:“猜你喜欢”是怎么猜中你的心思

如今,到网上购物的人已经习惯了收到系统为他们做出的个性化推荐。Netflix 会推荐你可能会喜欢看的视频。TiVo 会自动把节目录下来,如果你感兴趣就可以看。Pandora 会通过预测我们想要听什么歌...
  • xiaojie_cp
  • xiaojie_cp
  • 2015年05月21日 15:25
  • 1047

4种方法提高unity游戏性能

Performance is critical for mobile games, especially for fast-paced action games. As you probably kn...
  • hany3000
  • hany3000
  • 2014年01月16日 15:46
  • 1595

如何最大限度提高.NET的性能

优化 .NET的性能1)避免使用ArrayList。     因为任何对象添加到ArrayList都要封箱为System.Object类型,从ArrayList取出数据时,要拆箱回实际的类型。建议使用...
  • 21aspnet
  • 21aspnet
  • 2007年03月21日 00:51
  • 7584
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:提高你的DHTML性能 改变一些习惯
举报原因:
原因补充:

(最多只允许输入30个字)