效率！效率！效率！

原著：Mark Davis 翻译：onefi

2004年4月21日

<style type="text/css"> <!----> </style> 摘要：

此篇文章包括了一些在网页设计中时常用到的脚本。我们可以清晰的体会到其中的执行速度。这将有助于提高您的动态网页的速度。

导言：

自从有了IE4.0以后，我们所看到的网页一天一天的栩栩如生。可以说IE4时代的到来，是我们的眼界更加的宽广了。我们应用IE4，从中我们得到的好处是，可以在自己的个人站点上加入更多的图片、动画、网页特效，以此来体现我们的个性。强大的DHTML技术使得网页会有非同寻常的变化。甚至在某些时刻，运用这项技术可以我们可以模仿很多东西---比如说Windows的界面、Flash的动态效果---当然前提是您需要掌握这项技术。DHTML还有一个非常有意思的地方就是，通常同一种功能，它提供了不止一种的实现形式。换句话说也就是我们可以用不同的代码来实现同样的功能。但这就有执行效率的问题了，而这篇文章，我们讨论的就是这个东西。

DHTML网页中的变化：

一条最基本的更新动态网页的方法改变你网页上的内容。客户端的脚本，您可以使用DHTML object model或者W3C document object model(DOM)来为网页上添加新的元素。无论您何时改变动态网页，浏览器总是首先来识别网页内在的表示，然后会重新计算展现在客户端的网页的内容的具体的尺寸。如果您希望在网页上新加入一块新的内容，那么此时HTML语法分析器是需要被调用的，此时必然会带来一部分多余的开销。您可以使用insertAdjacentHTML和pasteHTML两种方法，以及innerHTML和outerHTML两种属性来在网页上添加新的内容文字。

方法一：改变HTML文字所使用的脚本，最好放在同一个脚本函数中。如果设计的时候一定要使用不同的脚本函数，比如当调用onmouseover和onmouseout这样一类的事件的时候，使你的脚本在一处出现最好。

这里需要大家知道的是，每当页面执行一个脚本函数，HTML编译器总是要重新计算现有的文字的格式，以及各自在网页中的位置。这样您或许就清楚为什么要把脚本都写在一个脚本函数中。（当然同样我也不希望，您改变您现在调用很多函数的代码书写风格。）

方法二：当需要改变文档内容的时候，使用一个HTML的字符串型的变量来代替所有需要修改的内容，进行一次修改，而不是一次一次的来改变文档的内容。如果不需要HTML的目录，这时候可以考虑使用innerText属性。

在下面的例子中，“慢”的例子的执行过程是每次在文档中添加新的文字内容，都令HTML编译器调用一次innerText属性。加快网页速度，“快”的例子只调用了一次innerText属性。
点击进入演示页面

慢：

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;

需要更多信息，请参考Dynamic Content。

关于innerText的讨论：

在DHTML对象模型中，HTML文档的文字内容的添加都是通过innerText来完成的。然而同样，W3C DOM也提供了一个来实现在一功能的方法。如果您希望在HTML文档中添加一个节点，那么，使用DOM中的createTextNode方法可以实现。要达到更好更快的效果，还是推荐使用innerText属性。

方法三：使用innerText属性来改变您的文档内容。

在下面的示例中，展现了如何使用innerText属性来提高网页的效率。
点击进入演示界面

慢：

var node;

for (var i=0; i<100; i++)

　{

　　node = document.createElement( "SPAN" );

　　node.appendChild( document.createTextNode( " Using createTextNode() " ) );

　　divUpdate.appendChild( node );

　}

快：

var node;

for (var i=0; i<100; i++)

　{

　　node = document.createElement( "SPAN" );

　　node.innerText = " Using innerText property ";

　　divUpdate.appendChild( node );

　}

使用DOM来添加单独的节点：

前面我们已经提到过，为HTML文档中的添加新的内容，是要调用HTML编译器的，所以在这期间，必然会有效率上的损失。所以，在添加新的节点的时候，我们联合调用createElement和insertAdjacentElement方法，而不是仅仅调用一次insertAdjacentElement方法。

方法四：调用createElement和insertAdjacentElement方法，比调用insertAdjacentHTML方法快。

调用insertAdjacentHTML方法，可能会使您的代码看起来更加漂亮，但我们不是在这里畅谈艺术。在这里，我们直接通过DOM调用他的方法会变得更加有效。
点击进入演示界面

慢：

for (var i=0; i<100; i++)

　{

　　divUpdate.insertAdjacentHTML( "beforeEnd", "<SPAN> Uses insertAdjacentHTML() </SPAN>" );

　}

快：

var node;

for (var i=0; i<100; i++)

　{

　node = document.createElement( "SPAN" );

　node.innerText = " Uses insertAdjacentElement() ";

　divUpdate.insertAdjacentElement( "beforeEnd", node );

　}

在SELECT中添加新的选择项：

通常我们在动态网页的需求当中，会碰到需要在下拉菜单中添加新的选择项，但一般情况下我们只需要添加一两个就可以解决问题，这个时候我们能够做到就可以了。但是如果需要添加成百上千个选择项怎么办？这时候我们需要使用innerHTML方法而不是为每个需要添加的选项调用一次createElement。

方法五：为SELECT添加大数量的选项的时候，使用innerHTML，而不是添加一个调用一次createElement。

在下面的例子中，使用了一个字符串。将需要添加的内容用HTML文档的格式负值给字符串，然后当作一个需要添加在HTML页中的文字一样添加到相应的SELECT中，就像方法二种我们讨论的那样。而不是添加一个<option>，调用一次相应的方法。在这其中，我们使用了Microsoft JScript的join方法，来进行最终的<option>节点的拼接。
点击进入演示界面

慢：

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 = "Item " + i;

　}

快：

var str="<SELECT ID='selUpdate'>";

for (var i=0; i<1000; i++)

　{

　　str += "<OPTION>Item " + i + "</OPTION>";

　}

str += "</SELECT>";

divUpdate.innerHTML = str;

更快：

var arr = new Array(1000);

for (var i=0; i<1000; i++)

　{

　　arr[i] = "<OPTION>Item " + i + "</OPTION>";

　}

divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "</SELECT>";

使用DOM来改变您的表格：

使用DOM中的方法来为自己的表格添加更多的行与列，要比使用insertRow和insertCell两种方法合算的多。当建立非常大的表格的时候（比如说100行100列，或者更多），这就显得尤为有效。

方法六：使用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 = "Row " + i + ", Cell " + 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 = "Row " + i + ", Cell " + j;

　　　}

　}

一劳永逸：

当你的网页多次用到同一段脚本代码的时候，不要在每个请求这段脚本的网页中添加代码。我推荐的做法是把这段脚本保存在一个文件中，让每个请求这段代码的网页直接去调用那个文件。这样如果该脚本已经被某个客户端执行了一次，那么它将被写在这个客户端的浏览器缓存中，下次调用的时候不必下载这部分内容，从而节省了时间。

方法七：将需要多次调用的脚本内容存放在一个文件中，另所有网页共享这一资源。

当然，这一方法也可以扩展到层叠样式表（CSS）的使用。通常同一站点的网页都具有相同的风格，从而也就涉及到非常多的样式的设定。将这些设置保存在一起，作为一个共享资源出现在您的站点中，这样可以提高网页的请求速度，同时不影响任何的效果。

不要制作动态效果过多的网页：

DHTML中的各种功能为开发人员提供了一个非常广阔的开发空间，它能够使我们的网页变得更加具有动感。这是一项伟大的创举，同时更重要的，它减少了网页中脚本代码的数量。但是同样他也带来了相应的问题，在执行DHTML中的各种效果的时候，每次都会调用HTML编译器对代码进行重新编译，甚至重新计算网页中各个元素的具体位置。这一部分在时间以及性能上的开销往往会令您的网页看起来不是那么协调。所以，尽量在一篇网页上不要用到更多的动态效果，这样会加快网页的访问速度。

方法八：一篇网页内不要有过多的动态效果。

这一部分就没有代码可以演示了 ：）

学会使用数据绑定

数据绑定是一个非常强大的功能，适用的情况是，对于现有的一组数据，不必每次动态的调用，而是使用类似于XML data island的功能，加入到现有的HTML文档中。这样您不必在网页中提供一个类似于产看各种功能的函数，取而代之的是一个资料的整体的索引。可能大家不太明白这句话的具体含义。举个例子说，比如您有一个个人网站，希望把自己的生平事迹全都罗列出来，那可是一项巨大的工程！用普通的方法，每次浏览者希望看到您的受教育的情况，让我们看看这个过程：他在网页上找到您提供的相应的功能，点击，向服务器发出请求，通过验证，在数据库（如果是的话）找到需要的资料，下载，HTML编译器重新编译结果，计算网页显示的格式（也就是具体的位置），显示在您的眼前。哇！看一个简单的资料需要如此繁琐的过程，最要命的是还要去服务器请求结果！如果此时服务器很慢呢？所以我们的解决方案是数据绑定，将所有数据绑定到客户端，浏览者就可以不用通过请求服务器做到同样的事情，并且效率是原先的好几倍，更重要的是，您的网页上省去了那些讨厌的功能按钮，这样就能更加快速的在本地浏览。

方法九：使用数据绑定，为客户端提供更多更快的数据资源。

这一部分也没有代码可以演示 ：）

不要在document中使用属性额外的属性
DHMTL中提供了一个功能，可以自己定义属性，这样我们就能用自己定义的属性来存放更多的有用的资料。例如，我们可以自己定义一个事件叫做mouseover，当真正的onmouseover引发的时候引发自己定义的函数（类似于HTC）。但是千万记住，不要在document对象中使用这样的技术。

方法十：最好在window对象中使用自定义属性。

点击进入演示界面

慢：

for (var i=0; i<1000; i++)

　{

　　var tmp;

　　window.document.myProperty = "Item "+i;

　　tmp = window.document.myProperty;

　}

快：

for (var i=0; i<1000; i++)

　{

　　var tmp;

　　window.myProperty = "Item "+i;

　　tmp = window.myProperty;

　}

关于Class与CSS：

如果您的网页提供了不同的阅览风格，这需要我们对同一个元素，定义很多不同的样式。最好的方法是，直接修改该元素的style，而不是改变这个元素的className。

方法十一：改变元素样式，直接修改该元素style，不要改变它的className。

这部分也没有代码 ：）

写在最后

上面讨论了一些小的技巧，如何使动态网页的访问变得更加快速，这在我们平时的工作中，是绝对用的到的。如果您是一个初学网页设计的人，那么这篇文章可能并不适合您。
如果大家有更多好的建议，好的方法，好的技巧，我希望与大家作进一步的交流。您可以点击左边的“评注”，把您想说的都留在那里，或者您也可以给我发信，我的个人邮箱是：[e-mail]