加快 DHTML 的一组技巧[3]

使用字符串连接操作来建立 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 对象模型的一部分）效率更高。尤其在创建大的表时，效率上的差别更加明显。

请显示

慢：

 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 页面重复使用。这样做，不仅可以改善代码的维护性，而且使该脚本文件保留在浏览器的缓存中，从而只需要在用户访问站点时向本地下载一次。将常用的样式规则放在独立的文件中也可以得到同样的好处。

要更好地利用脚本重用功能，请将常用的脚本操作放到 dhtml 附加代码或元素行为（英文）中。行为提供了一个有效的方法，用于重用脚本和建立从 html 访问的组件，并使您可用自己的对象、方法、属性和事件来扩展 dhtml 对象模型。对于未使用 viewlink（英文）功能的行为，可以考虑使用 internet explorer 5.5 中的 lightweight（英文）行为特性进行更有效的代码封装。另外，如果您的脚本代码在一个 script（英文）块中，会获得更高的性能。

请勿过多使用动态属性

动态属性（英文）为 web 作者提供了一种将表达式用作属性值的方法。表达式在运行时计算，其结果值将应用于属性。这是一个强大的特性。此特性可用于减少页面上的脚本数量，但是因为必须定时重算表达式，而且该表达式经常与其他属性值相关，所以它会对性能带来消极的影响。这种情况对定位属性尤其明显。

数据绑定很有效

数据绑定（英文）是一个强大的功能，它使您可以将数据库查询的结果或 xml 数据岛（英文）的内容，绑定至 web 页面上的 html 元素。您无需返回服务器提取数据，就可以提供数据排序和过滤功能，以及不同的数据视图。设想一个 web 页面可以将公司的数据显示为折线图、条形图或饼图，还具有将数据按办公室、产品或销售阶段排序的按钮，而且所有这些功能只需要访问一次服务器就能实现。