加快 DHTML 的一组技巧,吐血推荐!
来源:MSDN CHINA 时间:07-03-20 点击: 点击这里收藏本文
技巧 4：调用 createElement 和 insertAdjacentElement 方法比调用 insertAdjacentHTML 方法快。
成批处理 DHTML 更新并调用一次 insertAdjacentHTML 方法可以提高性能，但是有时直接通过 DOM 创建元素效率更高。在下面的方案中，您可以尝试一下这两种方法并确定哪一种更快。
请显示
慢：
for (var i=0; i<100; i )
{
divUpdate.insertAdjacentHTML( "beforeEnd", "<SPAN> 使用 insertAdjacentHTML() </SPAN>" );
}
快：
var node;
for (var i=0; i<100; i )
{
node = document.createElement( "SPAN" );
node.innerText = " 使用 insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", node );
}
扩展 SELECT 元素中的选项
对于上一条使用 HTML 文本方法的规则来说，将大量 OPTION（英文）元素添加到 SELECT（英文）中的情况是一种例外。这时候，使用 innerHTML 属性比调用 createElement 方法访问选项集合效率更高。
技巧 5：使用 innerHTML 将大量选项添加到 SELECT 元素中。
使用字符串连接操作来建立 SELECT 元素的 HTML 文本，然后使用此技巧设置 innerHTML 属性。对于数量特别大的选项，字符串连接操作也会影响性能。在此情况下，请建立一个数组并调用 Microsoft JScript?join（英文）方法来执行 OPTION 元素 HTML 文本的最终连接。
请显示
慢：
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 = "第 " i " 项";
}
快：
var str="<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i )
{
str = "<OPTION>第 " i " 项</OPTION>";
}
str = "</SELECT>";
divUpdate.innerHTML = str;
更快：
var arr = new Array(1000);
for (var i=0; i<1000; i )
{
arr ［i］ = " <OPTION>第 " i " 项</OPTION>";
}
divUpdate.innerHTML = "<SELECT ID='selUpdate'>" arr.join() "</SELECT>";
用 DOM 更新表
使用 DOM 方法插入表的行和单元格比使用 insertRow（英文）和 insertCell（英文）方法（DHTML table 对象模型的一部分）效率更高。尤其在创建大的表时，效率上的差别更加明显。
技巧 6：使用 DOM 方法建立大表。
请显示
慢：
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 = "第 " i " 行，第 " j " 单元格";
}
}
快：
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 = "第 " i " 行，第 " j " 单元格";
}
}
编写一次，使用多次
如果您的 Web 站点使用脚本来执行一些常用操作，可以考虑将这些功能放到独立的文件中，以便可以由多个 Web 页面重复使用。这样做，不仅可以改善代码的维护性，而且使该脚本文件保留在浏览器的缓存中，从而只需要在用户访问站点时向本地下载一次。将常用的样式规则放在独立的文件中也可以得到同样的好处。
把此文章收藏到：
