0

我对 Internet Explorer（8 和 9）和大型数据表有一个非常大的性能问题。

当我加载了几百个项目时，浏览器（不仅是 Internet Explorer，还有 Chrome 和 Firefox）开始滞后很多。起初我以为是 JavaScript 的原因，但后来我意识到这是 CSS 的错。我发现display:none浏览器不会渲染元素，所以我进行了调整并开始在元素中分组元素并在它们在视口中不可见时隐藏它们，如下所示：

<tbody style="display:none"></tbody>
<tbody></tbody>

Chrome 和 Firefox 的性能确实有所提高，但在 Internet Explorer 中却没有。Internet Explorer 似乎仍在渲染或尝试重新计算这些隐藏元素的样式。看起来display:none在 Internet Explorer 上没有什么区别。如果我不能渲染工作，我相信性能应该会提高，但我不知道如何......

另外，浏览器开始滞后于大型数据表的原因是因为每一行都有大约 50 个元素，其中也有大量的 CSS 样式。

我不知道还有什么可以尝试在 Internet Explorer 中解决此问题...

有任何想法吗？

PS：table-layout设置为fixed

4

5 回答 5

2

渲染速度还取决于您为DOM创建元素的方式，即使脚本本身执行得很快。

以我（Internet Explorer）的经验document.write()是创建大表的最快方法。它可以比appendChild(document.createElement()). 也insertRow() & insertCell()比创建和附加每行和单元格要快得多。innerHTML似乎是添加内容最慢的方法（尽管在这种情况下，它只能用于创建单元格内容，而不是表格本身）。

不幸的是，性能之间的这些差异不一定是跨浏览器的，一个浏览器使用其他方法比另一个浏览器更快地完成相同的工作......

那你能做什么？尝试将您的表格“拆分”为几个较小的表格。你说那table-layout: fixed是定的；你也使用COL和/或COLGROUP标签和widths吗？没有它们，设置table-layout几乎没用。或者你可以使用延迟加载；只需加载表的一小部分，并在需要时加载更多。

“示例”：我创建了一个 Internet Explorer 应用程序，该应用程序当前显示 379 个表格，其中有 6 行，每行有 8 个单元格。创建和呈现这些表只需不到 2 秒（在Internet Explorer 9中）。但是，（我刚刚测试过）如果我将所有 2274 行创建到一个表中，渲染将需要大约 15 秒。我认为将大表拆分为更小的部分也会加快其他浏览器中的渲染速度。

于 2012-11-30T11:49:06.097 回答
0

我看不到示例代码，但您可以从 DOM 中删除隐藏的元素。

因此，不仅仅是设置，而是display:none将它们分离removeChild()并存储在某个对象中，直到您需要显示它们，然后将它们插入适当的位置。

于 2012-11-30T10:22:06.667 回答
0

对于没有 Internet Explorer 11 的所有 Internet Explorer 浏览器来说，这实际上是一个问题。通常（对于所有其他浏览器）“显示：无”意味着其中的所有内容都不应该在加载时从浏览器中真正处理，但 Internet Explorer 确实如此出于某种原因。

唯一的解决方案是将其排除在 DOM 之外并渲染部分表格。

我有同样的问题。我最初有一张包含 1000 条记录的表，大多数浏览器都崩溃了（Firefox 是唯一一个处理它的）。即使它处理了初始 DOM，表格也会给人一种缓慢的拖动感觉（真的很烦人）。所以它有点无法使用。

然后我将它分成较小的表（200 条记录），从一开始就使用 select 下拉菜单和 display:none。这实际上完全解决了所有浏览器的缓慢页面拖动问题。唯一的问题仍然是 Internet Explorer 10、9、8 的初始加载缓慢（大约需要 2000 毫秒）。

不幸的是，解决这个问题的唯一方法是在加载之前专门从 DOM 中排除表。

于 2014-07-10T07:46:54.460 回答
0

在display:none我自己不被查看的元素上使用过之后，我可以向您保证，即使在 IE 中，它也会带来巨大的性能提升。

您在这里遇到的问题是浏览器必须不断地重新计算列大小，尤其是在您更改display属性时。

要解决此问题，请尝试添加table-layout:fixed到您的表格样式中。这将有效地禁用动态列宽，并在元素更改时提供更一致的查看。但是，您可能需要width为第一行指定 s。这应该会在所有浏览器中带来天文数字的性能提升。

于 2014-07-10T08:14:23.127 回答
0

为了解决重绘问题，请使用文档片段。附加到文档片段的子项不会被渲染，也不会导致您看到的问题。然后，您可以将片段本身插入到表中：

var docFrag = document.createDocumentFragment();

// The following is pseudo code, but you get the picture
for (var i = 0; i < largeCount; i++) {
    var row = createRow();
    docFrag.appendChild(row);
}

// Append the fragment to the table (or even tbody)
var tbl = document.getElementById('myTbl');
tbl.appendChild(docFrag);

文档片段本身不会呈现为任何内容，它基本上是一个容器元素，充当占位符并在您将其插入某些内容后消失。

编辑：可以在这里找到更多信息。

于 2014-07-10T08:34:37.280 回答