首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议145:慎重使用HTML格式进行通信

关灯直达底部

JavaScript虽然能够比较快地将一个大数据结构转化为简单的HTML,但是服务器完成同样工作的速度更快。一种技术考虑是在服务器端构建整个HTML,然后将其传递给客户端,JavaScript只是简单地下载它并将其放入innerHTML。下面使用HTML编码用户列表。


<ul>

<liid="1-id">

<a href="#"class="username">alice</a>

<span>Alice</span>

<a href="mailto:[email protected]"class="email">[email protected]</a>

</li>

<liid="2-id">

<a href="#"class="username">bob</a>

<span>Bob</span>

<a href="mailto:[email protected]"class="email">[email protected]</a>

</li>

<liid="3-id">

<a href="#"class="username">carol</a>

<span>Carol</span>

<a href="mailto:[email protected]"class="email">[email protected]</a>

</li>

<liid="4-id">

<a href="#"class="username">dave</a>

<span>Dave</span>

<a href="mailto:[email protected]"class="email">[email protected]</a>

</li>

</ul>


使用HTML格式的问题在于,HTML是一种详细的数据格式,比XML更加冗长。数据本身的最外层可以有嵌套的HTML标签,每个标签都具有ID、类和其他属性。尽管HTML格式可通过尽量少用标签和属性来缓解占用空间多的问题,但是HTML格式还是可能比实际数据占用更多的空间。正因为如此,只有当客户端CPU比带宽更受限时才使用此技术。

一种极端情况是,有一种格式包含最少数量的结构,需要在客户端解析数据,如JSON。将这种格式下载到客户机非常快,然而这一过程需要引擎花费更多的时间把它转化成HTML以显示在页面上。这需要很多字符串操作,而字符串操作也是JavaScript最慢的操作之一。

另一种极端情况是,在服务器上创建HTML。这种格式在线传输数据量大,下载时间长,不过一旦下载完,只需一个操作就可以显示在页面上。这种格式与其他几种格式的差别:“解析”在这种情况下指的是将HTML插入DOM的操作。此外,HTML不能像本地JavaScript数组那样轻易且迅速地进行迭代操作。

HTML传输数据量明显偏大,需要的解析时间也很长。将HTML插入到DOM的单一操作看似简单,只有一行代码,却需要时间向页面加载很多数据。与其他测试相比,这些性能数据确实有轻微的偏差,最终结果不是数据数组,而是显示在页面上的HTML元素。无论如何,结果仍显示出HTML的一个事实:作为数据格式,它缓慢且臃肿。