资料来源：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的用法）
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器
