可以采取哪些措施來提高大型數據集的IE8性能？

Question

我有一個顯示約300頁表格數據的頁面。 Firefox，Chrome，Safari都運行良好，但IE 7,8和8兼容性視圖都很糟糕。 當我嘗試滾動或按下向上翻頁/向下翻頁按鈕時，它會滯后幾秒鍾。

分頁，較小的數據集和其他可用性建議不適用於此頁面。 假設我絕對別無選擇，只能一次顯示所有這些數據......我可以做些什么來調整它？

數據正在通過jQuery / Ajax加載，這似乎至少在某種程度上是可疑的，因為當我創建一個測試頁面來直接渲染結果時，它並不是那么慢，但仍然不像其他瀏覽器那樣快速。

我已經成功地使用了像SlickGrid這樣的jQuery插件來解決過去類似的問題，但是由於原因需要很長時間來解釋它們不是一個選項，即使使用微模板渲染功能也是如此。 我主要關注的是我可以在不重新整理頁面或引入第三方解決方案的情況下進行調整以提高性能。

簡化的DOM會有很大的不同嗎？ 或者IE不能很好地處理通過JavaScript / Ajax帶來的數據？

Answer 1

沒有更多細節或示例很難看到......你是如何構建內容的？ 構建表內容有很多小問題：特別是在<table>上直接設置innerHTML在IE中不起作用，所以jQuery的html()可能會做很長很慢的事情，如果這就是你的意思使用。

但是對於任何帶有表的東西的通用提示，尤其是更大的表：設置樣式table-layout: fixed在<table>元素上，僅在第一行單元格上設置列width樣式，或者在<col>的集合上設置列width樣式<col> s。 （沒有明確width列將在液體布局情況下共享它們之間的剩余寬度。）

由於它不依賴於每個單元格中的內容數量，因此fixed表格布局比默認auto表格布局算法更快且更可預測。

Answer 2

使用innerHTML並最小化js / dom交互。 Js在IE中並不慢，但js / dom橋非常慢。 還要避免在要插入的html中選擇元素。 如果你這樣做，jQuery必須遍歷每個元素並針對id或css屬性進行測試。 這很慢。

本身在IE中插入幾千個元素是可行的。 但是如果你開始對這個html進行一些更改，你可能會遇到嚴重的性能問題。

除此之外，您需要使用代碼來說明如何加快速度。 還有一個可以分析的測試頁面會很棒。

僅供參考，唯一可用於IE的性能分析工具是dynatrace ajax版本。 它免費和優質的軟件。 用它 ！

Answer 3

   1. Avoid using script that going to make changes in DOM specially inside a loop.
        eg.

for ( var i = 0; i < rownodes.length; i++) {
  curRow = document.createElement("tr"); // this is a direct operation to DOM
  for(j=0 ;j <colLenth;j==){ 
     cell = document.createElement("td");
   }
}
// instead use..
var table = '<table>';
for ( var i = 0; i < rownodes.length; i++) {
   table = table + '<tr>'; // don't use DOM operation if not needed.
    for(j=0 ;j <colLenth;j==){   
      table = table + '<td> my text </td>';
    }
}
table = table + '</table>';// simple string operations will be much faster
('#myDiv').append($(table));// at the end you can add it to the DOM. 

[Building High Performance HTML Pages][1]

  [1]: http://msdn.microsoft.com/en-us/library/ms533002%28v=vs.85%29.aspx

Answer 4

我發現當你動態地將大型復雜內容插入到現有頁面中時，IE在設置innerHTML比在程序上創建數十個或數百個DOM節點並插入它們要快得多（無論你使用的是客戶端庫是否存在。 如果您渲染HTML服務器端並將其作為字符串發送而不是發送JSON數據並呈現客戶端，那么您將使用更多帶寬，但您的IE用戶可能會獲得更好的體驗。

IE的javascript性能目前非常糟糕，所以如果你想讓你的網站在IE中更快，最小化大規模DOM操作是一個好的開始。 制作一個簡單的測試用例進行比較應該不會太難，看看這樣的改變是否會對您的特定情況有所幫助。

Answer 5

注意IE8中的jQuery .find（）。 如果不仔細寫，你可能會導致IE8做一些非常荒謬的體操。 希望我更了解為什么等等，但如果你在jQuery中注釋掉你的.find（）並運行它，即使你的腳本暫時中斷，你可能會看到頁面突然加載很快。

只是一個猜測，但很容易嘗試。

Answer 6

1. 還可以通過改進表格來改進表格的渲染。 通過添加colgroup，表的呈現變得很快（可以看到使用大表時的差異），因為瀏覽器引擎不必查找單獨的col寬度。

  <table style="table-layout: fixed" width="600"> <colgroup> <col width="100"><col width="300"><col width="200"> </colgroup> <tr height="20"> <td>ss</td> <td>ss</td> <td>ss</td> </tr> <tr></tr> .... ... </table> 

see the below link for detailed discription

http://msdn.microsoft.com/en-us/library/ie/ms533002(v=vs.85).aspx