加快 DHTML 的一组技巧
来源:互联网 发布:nativeshare.js调用 编辑:程序博客网 时间:2024/05/16 13:53
加快 DHTML 的一组技巧
技巧 1:在一个脚本函数中对 HTML 内容进行更改。如果您的设计使用
了多个事件处理程序(例如响应鼠标移动),则应集中进行更
改。
HTML分析和显示组件的另一项重要事实是:一旦脚本返回控制(例如,
当脚本事件处理函数退出时,或者当调用setTimeout(英文)等方法时),
该组件将重新计算布局并显示Web页面。现在您已经了解Internet Explorer
如何处理变化,下面将开始提高 Web页面的性能。
技巧2:建立一个 HTML 字符串并对文档进行一次更改,而不是进行多
次更新。如果 HTML 内容不是必要的,可考虑使用
innerText(英文)属性。
在以下示例中,速度较慢的方法每次设置innerHTML属性时都调用HTML
分析器。要提高性能,可以先建立一个字符串,然后将其分配给innerHTML
属性。
慢:
快:
使用 innerText
DHTML 对象模型通过 innerText(英文)属性访问 HTML 元素的文本
内容,而 W3C DOM则提供一个独立的子文本节点。直接通过 innerText属
性更新元素的内容,比调用 DOM createTextNode (英文)方法更快。
技巧 3:使用 innerText 属性更新文本内容。
以下示例显示了如何使用 innerText 属性提高性能。
慢:
快:
使用 DOM 添加单个元素
如前所述,应用 HTML 文本的访问方法将导致调用 HTML 分析器,从
而会降低性能。因此,使用 createElement(英文)和 insertAdjacent
Element(英文)方法添加元素比调用一次 insertAdjacentHTML 方法快。
技巧 4:调用 createElement 和 insertAdjacentElement 方法比调用
insertAdjacentHTML 方法快。
成批处理 DHTML更新并调用一次 insertAdjacentHTML 方法可以提高
性能,但是有时直接通过 DOM创建元素效率更高。在下面的方案中,您可
以尝试一下这两种方法并确定哪一种更快。
慢:
快:
扩展 SELECT 元素中的选项
对于上一条使用 HTML 文本方法的规则来说,将大量OPTION(英文)
元素添加到SELECT(英文)中的情况是一种例外。这时候,使用innerHTML
属性比调用createElement方法访问选项集合效率更高。
技巧 5:使用 innerHTML 将大量选项添加到 SELECT 元素中。
使用字符串连接操作来建立 SELECT 元素的 HTML 文本,然后使用此
技巧设置 innerHTML属性。对于数量特别大的选项,字符串连接操作也会
影响性能。在此情况下,请建立一个数组并调用 Microsoft JScript join
(英文)方法来执行 OPTION 元素 HTML 文本的最终连接。
慢:
用 DOM 更新表
使用DOM方法插入表的行和单元格比使用insertRow(英文)和insert
Cell(英文)方法(DHTML table 对象模型的一部分)效率更高。尤其在
创建大的表时,效率上的差别更加明显。
技巧 6:使用 DOM 方法建立大表。
慢:
了多个事件处理程序(例如响应鼠标移动),则应集中进行更
改。
HTML分析和显示组件的另一项重要事实是:一旦脚本返回控制(例如,
当脚本事件处理函数退出时,或者当调用setTimeout(英文)等方法时),
该组件将重新计算布局并显示Web页面。现在您已经了解Internet Explorer
如何处理变化,下面将开始提高 Web页面的性能。
技巧2:建立一个 HTML 字符串并对文档进行一次更改,而不是进行多
次更新。如果 HTML 内容不是必要的,可考虑使用
innerText(英文)属性。
在以下示例中,速度较慢的方法每次设置innerHTML属性时都调用HTML
分析器。要提高性能,可以先建立一个字符串,然后将其分配给innerHTML
属性。
慢:
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
...{
divUpdate.innerHTML += "这是一个较慢的方法!";
}
for ( var i=0; i<100; i++ )
...{
divUpdate.innerHTML += "这是一个较慢的方法!";
}
快:
var str="";
for ( var i=0; i<100; i++ )
...{
str += "因为使用字符串,此方法较快!";
}
divUpdate.innerHTML = str;
for ( var i=0; i<100; i++ )
...{
str += "因为使用字符串,此方法较快!";
}
divUpdate.innerHTML = str;
使用 innerText
DHTML 对象模型通过 innerText(英文)属性访问 HTML 元素的文本
内容,而 W3C DOM则提供一个独立的子文本节点。直接通过 innerText属
性更新元素的内容,比调用 DOM createTextNode (英文)方法更快。
技巧 3:使用 innerText 属性更新文本内容。
以下示例显示了如何使用 innerText 属性提高性能。
慢:
var node;
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "使用 createText
Node() ") );
divUpdate.appendChild( node );
}
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "使用 createText
Node() ") );
divUpdate.appendChild( node );
}
快:
var node;
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 属性";
divUpdate.appendChild( node );
}
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 属性";
divUpdate.appendChild( node );
}
使用 DOM 添加单个元素
如前所述,应用 HTML 文本的访问方法将导致调用 HTML 分析器,从
而会降低性能。因此,使用 createElement(英文)和 insertAdjacent
Element(英文)方法添加元素比调用一次 insertAdjacentHTML 方法快。
技巧 4:调用 createElement 和 insertAdjacentElement 方法比调用
insertAdjacentHTML 方法快。
成批处理 DHTML更新并调用一次 insertAdjacentHTML 方法可以提高
性能,但是有时直接通过 DOM创建元素效率更高。在下面的方案中,您可
以尝试一下这两种方法并确定哪一种更快。
慢:
var node;
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 属性";
divUpdate.appendChild( node );
}
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 属性";
divUpdate.appendChild( node );
}
var node;
for (var i=0; i<100; i++)
...{
node = document.createElement( "SPAN" );
node.innerText = " 使用 insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", 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 〉";
for (var i=0; i<1000; i++)
...{
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "第 " + i + " 项";
}
divUpdate.innerHTML = "〈SELECT 〉";
for (var i=0; i<1000; i++)
...{
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "第 " + i + " 项";
}
快:
var str="〈SELECT 〉";
for (var i=0; i<1000; i++)
...{
str += "〈OPTION〉第 " + i + " 项〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
更快:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
...{
arr[i] = "〈OPTION〉第 " + i + " 项〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT 〉" + arr.join() + "
";
var str="〈SELECT 〉";
for (var i=0; i<1000; i++)
...{
str += "〈OPTION〉第 " + i + " 项〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
更快:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
...{
arr[i] = "〈OPTION〉第 " + i + " 项〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT 〉" + arr.join() + "
";
用 DOM 更新表
使用DOM方法插入表的行和单元格比使用insertRow(英文)和insert
Cell(英文)方法(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 + " 单元格";
}
}
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 + " 单元格";
}
}
- 加快dhtml 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧(摘自MSDN)
- 加快 DHTML 的12个技巧
- 一组JavaScript的小技巧
- 加快程序运行速度的技巧
- 加快程序运行速度的技巧
- VC中加快链接的小技巧
- Windows XP加快开机启动的技巧
- 加快Android编译速度的技巧总结
- SourceForge网站加快下载的技巧
- 某些加快程序程序的小技巧
- 从一个简单的OpenMP程序学习VS2003的OpenMP程序编译
- 安装Mono
- sprintf
- Microsoft .Net Remoting系列专题之三:Remoting事件处理全接触
- Mono初探--创建你的第一个Mono应用程序 (二)
- 加快 DHTML 的一组技巧
- SendKeys用法
- 7,10,2007
- Efficient in-memory extensible inverted file
- Delphi编写ActiveForm,TPopupMenu不能在同一进程的两个IE中正常显示的问题
- 看电影永不中招 查杀RM中的木马病毒
- SQL轮询数据依赖缓存
- oracle客户端 与 服务端字符集大疑问??
- Managed, Unmanaged, Native: What Kind of Code Is This?