Question

我有一个显示约300页表格数据的页面。 Firefox，Chrome，Safari都运行良好，但IE 7,8和8兼容性视图都很糟糕。当我尝试滚动或按下向上/向下翻页按钮时，它会滞后几秒钟。

分页，较小的数据集和其他可用性建议不适用于此页面。假设我绝对别无选择，只能一次显示所有这些数据......我可以做些什么来调整它？

数据是通过jQuery / Ajax加载的，这似乎至少在某种程度上是可疑的，因为当我创建一个测试页面来直接渲染结果时，它不是完全，但仍然没有其他浏览器那么活泼。

我已经成功地使用了像SlickGrid这样的jQuery插件来解决过去的类似问题，但由于原因需要很长时间来解释它们不是一个选项，即使使用微模板渲染功能也是如此。我主要关注的是我可以在不重新整理整个页面或引入第三方解决方案的情况下进行调整以提高性能。

简化的DOM是否会产生重大影响？或者IE无法处理通过JavaScript / Ajax带来的数据吗？

Answer 1

没有更多细节或示例很难看到......你是如何构建内容的？构建表内容有很多小问题：特别是在innerHTML上直接设置<table>在IE中不起作用，所以jQuery的html()可能会做很长很慢如果这就是你正在使用的那种方式。

但是对于包含表格的任何内容的通用提示，尤其是更大的表格：在table-layout: fixed元素上设置样式<table>，在第一行单元格上设置列width样式只在一组<col>上。（没有明确width的列将在液体布局情况下平均分配剩余宽度。）

由于它不依赖于每个单元格中的内容数量，fixed表格布局比默认的auto表格布局算法更快，更可预测。

Answer 2

使用innerHTML并最小化js / dom交互。 Js在IE中并不慢，但js / dom桥非常慢。还要避免在要插入的html中选择元素。如果你这样做，jQuery必须遍历每个元素并针对id或css属性进行测试。这很慢。

本身在IE中插入几千个元素是可行的。但是如果你开始对这个html进行一些更改，你可能会遇到严重的性能问题。

除此之外，您需要使用代码来说明如何加快速度。另外一个可以分析的测试页面会很棒。

仅供参考，IE可用的唯一性能分析工具是dynatrace ajax版本。它免费和优质的软件。使用它！

Answer 3

我发现当你动态地将大型复杂内容插入到现有页面中时，IE在设置innerHTML时比在程序上创建数十个或数百个DOM节点并插入它们要快得多（快得多），无论您是否使用客户端库。如果您呈现HTML服务器端并将其作为字符串发送而不是发送JSON数据并呈现客户端，那么您将使用更多带宽，但您的IE用户可能会有更好的体验。

IE的javascript性能目前非常糟糕，所以如果你想让你的网站在IE中更快，最小化大规模DOM操作是一个好的开始。做一个简单的测试用例进行比较应该不会太难，看看这样的改变是否会对你的特定情况有所帮助。

Answer 4

在IE8中注意jQuery .find（）。如果不仔细写，你可能会导致IE8做一些非常荒谬的体操。希望我更了解为什么等等，但是如果你在jQuery中注释掉.find（）并运行它，即使你的脚本暂时中断，你也可能会看到页面突然加载很快。

只是一个猜测，但很容易尝试。

Answer 5

   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 6

还可以通过改进表格来改善表格的渲染效果。通过添加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

可以采取哪些措施来提高大型数据集的IE8性能？

6 个答案: