可以采取哪些措施来提高大型数据集的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