使用Javascript呈現HTML的策略

Question

我通過AJAX調用從服務器獲取一個胖JSON數組，然后處理它並使用Javascript呈現HTML。 我想要的是盡可能快地使它盡可能快。

Chrome在我的測試中領先於FF，但瀏覽器渲染~300條記錄仍需要5-8秒。

我考慮過懶惰加載，例如在谷歌閱讀器中實現的，但這與我的其他用例相反，例如能夠獲得即時搜索結果（在客戶端對我們在JSON數組中獲得的所有記錄進行簡單搜索）和多個過濾器。

我注意到的一件事是FF和Chrome都沒有呈現任何內容，直到它們遍歷JSON數組中的所有項目，即使我在每個循環后顯式地將新創建的元素插入到DOM中（只要我有HTML）。 我想要實現的只是：強制瀏覽器盡快渲染。

我嘗試推遲調用（數組中的每個項目都將由延遲函數處理）但在那里遇到了其他問題，因為似乎不再保證執行的順序（數組中的某些項目將在其他項目之前處理之前的項目）。

我在這里尋找任何提示和技巧。

Answer 1

如果您不需要一次顯示所有300條記錄，您可以嘗試一次為它們分頁30或50條記錄並僅展開JS​​ON數組，因為這些子部分需要通過尋呼機或本地搜索框顯示。 轉換后，您可以在用戶在頁面上下導航時緩存內容以供后續顯示。

Answer 2

嘗試：

• 將行推入數組，然后簡單地

    el.innerHTML = array.join(""); 

• 使用文檔片段

   var frag = document.createDocumentFragment(); for ( loop ) { frag.appendChild( el ); } parent.appendChild( frag ); 

Answer 3

嘗試在分離的DOM節點或文檔片段中創建元素，然后一次性附加整個元素。

Answer 4

300不是很多。 我設法使用jQuery創建一個包含來自JSON的數據的500多個元素的樹，在Chrome上只需幾分之一秒。 300不是一個大數字。

如果它們渲染得如此緩慢，則可能是由於錯誤的方式。 你能說明你是怎么做到的嗎？

最慢的方法是在Javascript中將HTML寫入字符串，然后使用innerHtml成員分配它。 但這仍然會像300行一樣快。

Answer 5

Google Web Toolkit具有BulkTableRenderers ，旨在快速呈現大型表。 即使您選擇不使用GWT，也可以通過查看Apache License 2.0版下提供的源代碼來獲取一些技術。