讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議145:慎重使用HTML格式進行通信 >

建議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的一個事實:作為數據格式,它緩慢且臃腫。