IE 8 Quirks 与标准检索 offsetHeight/offsetWidth答案

【问题标题】：IE 8 Quirks vs Standards retrieving offsetHeight/offsetWidthIE 8 Quirks 与标准检索 offsetHeight/offsetWidth
【发布时间】：2011-04-01 22:36:10
【问题描述】：

我正在将我的应用程序转换为使用 XHTML 严格模式（之前它没有 DOCTYPE）。但是，我注意到在获取 offsetHeight/offsetWidth 时显着下降。这在具有大量 DOM 元素的页面上非常明显，比如说一个 1 列乘 800 行的表格，单元格只有一段文本。访问该表中的每个后代元素以获取它们的偏移尺寸比 IE 在 Quirks 模式下呈现页面时要慢得多。为什么会这样？有人知道帮助 IE 计算这些 offsetValues 的技巧吗？

【问题讨论】：

你有任何样本来证明这一点吗？

标签： javascript internet-explorer html-parsing offsetwidth

【解决方案1】：

@bobince：我认为问题在于回流。我的 JavaScript 中的逻辑试图确定子级是否在绝对布局容器中相互重叠（因为它们获得了我无法预测的动态内容），然后调整父级的 css 尺寸和需要向下移动的兄弟的 css。更改 css 尺寸会触发重排，这发生在我的迭代中间，这种情况在 IE8 标准中似乎比在 IE8 Quirks 中对于非常大的表要慢得多。我知道在执行此类操作时我应该隐藏或使用 documentFragment，但是因为我需要移动东西然后查看新的偏移尺寸，所以我得到的值不准确。

【讨论】：

【解决方案2】：

我建议强制 IE 以标准模式而不是怪癖来呈现您的页面。这可以通过在 html 文档的头部添加元标记或设置 Web 服务器以添加 X-UA-Compatible 标头来完成。

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

另外，使用内置的 javascript 框架，例如 jquery、prototype、yui 等，其中大多数已经解决了不同渲染引擎上的问题。

【讨论】：

我同意框架有很大帮助。我最近在一个项目中确实注意到 IE 8 仍然报告错误的$().outerHeight()。它让我发疯了！似乎 IE 在调整元素大小时试图获取高度，所以我必须实现一些同步。这只是 IE 8 上的一个问题，所以需要一些时间来追查。
我的问题是无法在标准模式下呈现。一旦我的页面以标准模式呈现，问题就是性能。我实际上将问题隔离到一行代码。有问题的行是： element.absoluteHeight=element.offsetHeight; 我错误地认为它得到了问题所在的偏移尺寸，因为我阅读了很多关于浏览器重排的内容。但是，一旦我打破了那条线，就会发现在 DOM 元素上设置属性是 quirks 和 IE8 标准模式之间存在巨大性能差异的地方，后者模式更糟糕。
@Paul：你能回答吗？我可以重现这一点：大多数操作在 IE8 标准模式下要快得多，包括读取 offsetDimensions。但是，expandos 很慢。
FF=3 不存在，OtherUA=4 毫无意义。它们仅作为潜在示例包含在 Microsoft 的 X-UA-Compatible 提案中。其他浏览器实现者拒绝使用此标头/元数据，因为他们没有需要保留完整的错误兼容性的内置操作系统问题：只有 IE 会注意。 IE=8 也意味着当 IE9 发布时你将获得更少的改进；考虑IE=edge 而不是始终使用最新版本。