[英文原文]
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 += this is a slower method! ;
}
fast:
var str=;
for ( var i=0; i<100; i++ )
{
str += this is faster because it uses a string! ;
}
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, uses insertadjacenthtml() );
}
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 = ;
for (var i=0; i<1000; i++)
{
opt = document.createelement( option );
selupdate.options.add( opt );
opt.innertext = item + i;
}
fast:
var str=;
for (var i=0; i<1000; i++)
{
str += item + i + ;
}
str += ;
divupdate.innerhtml = str;
faster:
var arr = new array(1000);
for (var i=0; i<1000; i++)
{
arr[i] = item + i + ;
}
divupdate.innerhtml = + arr.join() + ;
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数值的转换
15.尽可能少的使用定时器(指settimeout,setinterval这些)，而在同一个定时器里对所有要变化的对象进行操作