加快 DHTML 的一组技巧[4]

有关数据绑定的详细信息，请参见以下文章：

• 数据绑定概述（英文）
  
• 绑定页面数据（英文）
  
• 倾斜的、平均的和事实上的数据绑定（英文）

不要在 document 对象中设置 expando 属性

expando（英文）属性可以添加至任何对象。此属性非常有用，它可以存储当前 wed 页面内的信息，并提供了另一种扩展 dhtml 对象模型的方法。例如，您可以给 dhtml 元素指定一个 clicked 属性，用此属性提示用户已经单击了哪一个元素。在引发事件时，也可以使用 expando 属性，向事件处理函数提供更多的上下文信息。无论您如何使用 expando 属性，切记不要在 document（英文）对象上设置它们。如果您这样做，则当您访问该属性时，文档必须执行额外的重算操作。

技巧 10：在 window（英文）对象上设置 expando 属性。

请显示

慢：

for (var i=0; i<1000; i++)
 {
  var tmp;
  window.document.myproperty = "第 " + i + " 项";
  tmp = window.document.myproperty;
 }

快：

for (var i=0; i<1000; i++)
 {
  var tmp;
  window.myproperty = "第 " + i + " 项";
  tmp = window.myproperty;
 }

避免切换类和样式规则

切换类和样式规则是一种代价非常高的操作，需要重新计算并调整整个文档的布局。如果您的 web 站点使用样式表来提供内容的备用视图，可以考虑直接修改要更改的元素的 style（英文）对象，而不是修改元素的 classname（英文）属性或与类关联的 stylesheet（英文）对象。

技巧 11：在更改内容的外观时，直接修改 style 对象。

查找父项之前，先折叠文本范围

textrange（英文）对象表示用户选定或从 html 元素中检索的一个文本区域，例如 body（英文）。通过调用 parentelement（英文）方法，可以标识文本范围的父项。对于复杂的文本范围，在调用 parentelement 方法之前，先调用 collapse（英文）方法效率会更高。

技巧 12：在访问 parentelement 方法之前，先折叠文本范围。

有关详细信息，请参见 使用 textrange 对象（英文）。

其他资料

有关提高性能的其他技巧来源，请参见以下文章：

• 建立高性能 html 页面（英文）
  
• 提高性能的更多技巧（英文）
  
• 频繁的飞跃：提高 dhtml 页面的性能（英文）

mark davis 是 internet explorer sdk 文档组的软件设计工程师。他不懈地探索 internet explorer 的最新技术，不过有时也会到西北部去放松一下。