Question

我有一个使用datatables.net 1.9.4和jQuery呈现的相当大的表格。我正在提取数据asynchronously，然后在数据表初始化中设置aaData和aoColumns。

虽然它Chrome几乎立即显示在IE9，但显示需要6分钟。

IE's profiler表示96.7％的时间花在offsetWidth函数上。 offsetWidth在哪里以及何时调用？我找不到那个名字的功能。

以下是我的初始化选项：

aaData: data.Values,
aoColumns: data.Headers,
bProcessing: true,
bDeferRender: true,
bDestroy: true,
bFilter: false,
bPaginate: false,
bSort: false,
sScrollY: fnCalcDataTableHeight(690),
sScrollX: "100%",
bScrollCollapse: true,
bInfo: false,

我也有aoColumnDefs。

谢谢。

Answer 1

offsetWidth是元素布局宽度的只读值，包括元素的宽度，水平填充，水平边框和滚动条（如果存在）。 JQuery的outerwidth()给出了相同的东西。

每次向DOM添加/删除某些元素时，都必须调整渲染树。添加新元素时，将使用新元素计算文档的新布局，并使用新样式在浏览器上重新绘制重排和重绘。

现代浏览器尝试通过排队这些更改并立即刷新它们来尝试进行一些优化，以尽量减少这些昂贵的操作。但是当你的脚本要求像offsetWidth这样的值时，这些优化就无法应用，因为它是布局的值，所有在队列中挂起的布局更改都必须刷新，然后为{{返回最终值。 1}}准确。所以我们应该尽量减少它的使用。 Here's关于这个主题的有趣读物。即使在最糟糕的情况下，Chrome仍会尝试进行一些优化，但不是IE。

提出您的问题，datatables插件可能在内部使用它。您可以采取其他方法，而不是尝试更改插件。

使用DocumentFragment，自己生成所有表行，将它们附加到表中，然后在其上应用datatables小部件。如果您的行和列太复杂，请尝试使用模板引擎。从here

中挑选

上次我遇到这个问题时，我们有一个复杂的表格，并将行数限制为500并使用了分页。如果你的表很简单，你的门槛可能很大，但不是更大，考虑到IE :)

IE中的jQuery数据表优化，在offsetWidth中花费了96.7％的时间

1 个答案: