如何優化此HTML以在瀏覽器中更快呈現？

我已經繼承了一個爲大量項目生成html的應用程序。大約有2500個項目分爲不同的類別，因此創建了一個超過2500+的行表。這裏呈現的是一個單行代碼：如何優化此HTML以在瀏覽器中更快呈現？

<tr id='ev_2075_321' class='datagridRow1'> 
     <td align='left'> 
     <div style='margin-left: 20px;'> 
      <table cellspacing='0' cellpadding='0' style= 
      'cursor: pointer; width: 100%;'> 
      <tr> 
       <td style='width: 10px;'> 
       <img src='images/RewardsGreen.gif'> 
       </td> 
       <td valign='middle' align='left' style='cursor: default;' 
       ondblclick='doNothing;' onclick= 
       'listOnClick(5,"WHI.E_2075");' 
       onmouseover= 
       'highlightListItem("ev_2075_321", true); showInfoBubble(5,"WHI.E_2075","ev_2075_321","ev_cond_eventsContainer");' 
       onmouseout= 
       'highlightListItem("ev_2075_321", false, 1); hideInfoBubble();'> 
       <span style='margin-left: 3px;'>Card Registration</span> 
       </td> 
      </tr> 
      </table> 
     </div> 
     </td> 
    </tr>

你想，如果我減少這一個列表項與背景圖像，渲染時間會提高？目前它只是在Firefox和IE中崩潰。我評論了事件處理程序，只看到了大約30％的速度，我正在考慮使它們基於類，並通過jQuery選擇器綁定處理程序。任何其他方式，我可以加快這一點？或者你認爲我需要一些分頁。

來源

2011-03-09 Shawn

是分頁還是某種動態獲取列表的其餘部分，以便初始加載出現更快的選項？也可以考慮使用jQuery客戶端模板來生成所有這些HTML客戶端（儘管我無法想象使用JS生成這麼多的HTML將比直接渲染更快）。 – R0MANARMY 2011-03-09 00:29:19

你去找夥伴:) – Mattis 2011-08-20 18:14:52

你最好打賭就是介紹分頁。您的頁面加載時間會減少一次總數據的1/20（假設每頁有100個項目）。您的內容的可讀性也將大大提高。

來源

2011-03-09 00:26:28

分頁會看到最佳性能。
將內聯CSS移到外部 - 爲什麼要爲每一行下載該部分？
將事件處理程序移到外部 - 再次保存一些字節。

來源

2011-03-09 00:28:41 alex

分頁或一些花哨的漸進式加載:) – Dimitry 2011-03-09 00:32:14

2500行是很多。您可能需要考慮使用分頁選項來簡化此操作，並僅限制頁面上的DOM數量。有些人認爲是分頁原油，但實施相對容易。

另一種選擇是編寫一個只顯示當前查看內容的自定義表js代碼，以及兩邊的緩衝區。雖然這很複雜。

第三種選擇是使用第三方網格。那就是我會做的。

請記住，瀏覽器真的很擅長innerHTML替換。因此，如果您單獨追加2500行，則可以通過批量處理內部html操作來加快速度。

來源

2011-03-09 00:29:59 hvgotcodes

雖然2500個項目確實很多，但我認爲這不足以保證瀏覽器崩潰（特別是在Firefox中）。

試試下面的優化（如由他人我上面提到的一樣）：

減少HTML標記的金額，你有
內聯事件處理程序通常更快（從我的經驗），而不是綁定與jQuery。在任何情況下，取出它們並創建一個計時器來爲您綁定事件（定時器在單獨的線程上運行到UI）。如果你想要變得棘手，你甚至可以創建分頁，並且只有當用戶在頁面之間滾動時才綁定點擊處理程序。
溝內嵌圖像。這些將始終導致頁面加載速度變慢。一個CSS類更快。

最終，但是你最好的解決辦法，就是：

介紹分頁;或
引入「永不結束滾動」類型的功能（例如，像谷歌閱讀器一樣）

來源

2011-03-09 00:42:00

分頁的替代方法是延遲加載或按需加載。只需加載表格的一小部分即可開始使用，當用戶滾動到頁面底部時，加載另一小部分，等等。

此外，擺脫像valign/align/style這樣的內聯屬性，並將所有這些東西卸載到外部CSS中。

來源

2011-03-09 00:45:08 glomad

使用SlickGrid –它的設計專門處理巨大的數據集。我用它在成千上萬的記錄中使用它。 SlickGrid僅通過爲實際查看的行呈現DOM元素來實現此級別的性能。在向下滾動時，舊行會在創建新行時被銷燬，因此在給定時間內，DOM中實際上只有最少數量的元素。 Demos here.

（警告：要小心，如果你的事件處理程序綁定到網格中的元素油滑繞過jQuery和設置innerHTML自身，這將泄漏通過jQuery結合的任何處理。）

從UX從立場上來說，我更喜歡SlickGrid的方法（虛擬滾動）。我討厭處理分頁數據。

來源

2011-03-09 00:45:57 josh3736

如果分頁是不是一種選擇，你應該嘗試：

事件代表團（http://davidwalsh.name/event-delegate）。這將允許您爲每個事件類型註冊一個偵聽器。
'table-layout：fixed'對錶的樣式（http://www.w3schools.com/css/pr_tab_table-layout.asp）。這可以極大地改善巨型桌子的渲染時間。

來源

2011-03-09 00:51:01 tilleryj

如何優化此HTML以在瀏覽器中更快呈現？

回答

相關問題