加快 DHTML 的一组技巧[2]

在以下示例中，速度较慢的方法每次设置 innerhtml 属性时都调用 html 分析器。要提高性能，可以先建立一个字符串，然后将其分配给 innerhtml 属性。

请显示

慢：

 divupdate.innerhtml = "";
 for ( var i=0; i<100; i++ )
 {
  divupdate.innerhtml += "<span>这是一个较慢的方法！</span>";
 }

快：

 var str="";
 for ( var i=0; i<100; i++ )
 {
  str += "<span>因为使用字符串，此方法较快！</span>";
 }
 divupdate.innerhtml = str;

有关详细信息，请参见动态内容（英文）。

使用 innertext

dhtml 对象模型通过 innertext（英文）属性访问 html 元素的文本内容，而 w3c dom 则提供一个独立的子文本节点。直接通过 innertext 属性更新元素的内容，比调用 dom createtextnode（英文）方法更快。

以下示例显示了如何使用 innertext 属性提高性能。

请显示

慢：

 var node;
 for (var i=0; i<100; i++)
 {
  node = document.createelement( "span" );
  node.appendchild(  document.createtextnode( "使用 createtextnode() ") );
  divupdate.appendchild( node );
 }

快：

 var node;
 for (var i=0; i<100; i++)
 {
  node = document.createelement( "span" );
  node.innertext = "使用 innertext 属性";
  divupdate.appendchild( node );
 }

使用 dom 添加单个元素

如前所述，应用 html 文本的访问方法将导致调用 html 分析器，从而会降低性能。因此，使用 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 方法访问选项集合效率更高。