IE中的jQuery数据表优化，用于offsetWidth的时间占96.7%

我使用

datatables.net 1.9.4

和

jQuery

呈现了一个相当大的表。我异步拉取数据

，然后在数据表初始化中设置

aaData

和

aoColumns

虽然它几乎立即在

Chrome

中显示，但在

IE9

中显示需要6分钟

IE的

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

---

谢谢。

offsetWidth是元素布局宽度的只读值，包括元素宽度、水平填充、水平边框和滚动条（如果存在）。JQuery的

outerwidth（）

给出了相同的结果

每次在DOM中添加/删除某些元素时，都必须调整渲染树。当您添加新元素时，将发生回流和重新绘制，以使用新元素计算文档的新布局，并使用新样式（如果有）在浏览器上重新绘制文档

现代浏览器试图通过将这些更改排队并立即刷新来进行一些优化，以尽量减少这些昂贵的操作。但当脚本要求某些值（如

offsetWidth

）时，无法应用这些优化，因为这是布局的值，队列中所有挂起的布局更改都必须刷新，然后返回

offsetWidth

的最终值才能准确。所以我们应该尽量减少它的使用。关于这个话题的有趣读物。即使在最坏的情况下，Chrome也会尝试进行一些优化，但IE不会

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

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

---

上次我遇到这个问题时，我们有一个复杂的表，将行数限制为500，并使用分页。如果您的表很简单，那么阈值可以很大，但考虑到IE:）

dataTables中没有

offsetWidth（）

函数，但是对

元素的调用非常多。offsetWidth

。我打赌你是以怪癖模式跑步的？这通常是导致IE性能如此差的原因。在清除所有历史记录和其他内容后，是否在IE中尝试过它？嘿，我想这与表的css布局属性有关。尝试为所有表的内部组件（tr、th、td等）定义一个固定宽度值，并为相同的项目设置padding和margin=0。同时设置边框无。是。。在元素上设置确定的宽度也有助于更快地计算偏移网络宽度。