使用任何 doctype 在 Internet Explorer 中悬停表中的行都很慢答案

【问题标题】：Hovering rows in a table in Internet Explorer is slow with any doctype使用任何 doctype 在 Internet Explorer 中悬停表中的行都很慢
【发布时间】：2011-04-28 18:54:05
【问题描述】：

好吧，这个快把我逼疯了。

我有一个大约 100 行的 html 表。当您将鼠标移到行上方时，我希望行改变颜色。

我试过了：

：悬停在 CSS 中，
javascript 中的 onmouseover/onmouseout 事件
jquery .hover
jquery .mouseover/.mouseout
用 e.target 等鼠标悬停在桌子上

在 Firefox 中运行速度非常快，而在 IE7/IE8 中运行速度非常慢。无论我尝试什么文档类型。但是，如果我完全删除页面的文档类型（怪癖），那么它在 IE 中也非常快！

不幸的是，没有 doctype 对我来说是不可接受的，因为我使用了其他 (jquery ui) 组件，这些组件看起来像 doctype（否则这些在 IE 中会变慢！）

有什么建议吗？

测试：

怪癖模式（在 IE 中快速悬停）：http://www.watikwil.nl/test_quirks.html

严格模式（在 IE 中缓慢悬停）：http://www.watikwil.nl/test_strict.html

更新：我发现在 IE 中为悬停行使用背景图像实际上比使用背景颜色更快！但这仅在使用 :hover 时才有效。 jquery 或 javascript 方法运行不快。它仍然没有 Firefox 快，但我可以接受。

*更新 2：仍然有问题。在 IE8 中它仍然太慢，尤其是在行上有多个类时（如 JqGrid 所做的那样）*

更新 3：不知何故，我现在可以使用 IE8 了。禁用了 JqGrid 使用的一些类，不知道这是否有所作为。我正在使用 :hover 和背景图像。问题是，当我强制页面使用 IE7 标准模式时，它明显更快。但是当我在 IE7 中尝试相同的页面时，它又变得非常慢......真的让我发疯......

【问题讨论】：

如果将表格布局设置为固定会发生什么？我不能说我已经观察到这个问题（不管有没有表格）。你有一些测试链接吗？
将表格布局设置为固定无济于事......在怪癖模式下要快得多！我尝试使用 DIV 设置表格，这似乎比使用快得多，但我正在处理的应用程序使用 JqGrid，它使用

我现在添加了一些测试链接，在 IE 中使用 doctype 时悬停要慢得多（严格）

标签： javascript jquery internet-explorer hover doctype

【解决方案1】：

是的，我也遇到过这个问题，而且表格渲染速度在IE中一直是个问题。当您四处拖动鼠标时，您会注意到 CPU 挂钩（IE 在我的 dual 上使用了 50%）。

但是，您可以在 CSS:hover 上使用 text-decoration: underline 而不会导致此表格重新计算效果。

我理解 Rob 的评论，即 doctype 是无关的（而且是神圣的），但这是一厢情愿的想法。使用非常简陋的表格很容易重现该问题，除了 :hover CSS 之外没有单元格属性或单个行属性。当然，测量 DOCTYPE 对此的影响是很困难的，因为当您关闭 STRICT 时，您会禁用 IE 将 :hover 应用于非链接元素的能力。在页面上使用纯 CSS 边框且没有 javascript 或 CSS 表达式等的文本上绘制下划线也会导致问题，但是 text-decoration 不会。显然，如果您的表中有链接，IE 会专门针对该 CSS 规则禁止重新计算表。（换句话说，MS 开发人员在第一次发布缺陷之前就已经知道了这个问题，并且它在之后的 2 个主要版本中仍然存在。真是太好了:)。）所以，这是一个更酷的测试：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css">
    a:hover { text-decoration: line-through; }
    a:hover { line-height: 1.1em; }
</style></head><body><table><tbody>
    <tr>
        <td><a href='#'>Test</a></td>
etc.

请注意，如果您删除“line-height”CSS 规则，或者切换到 DOCTYPE TRANSITIONAL，则不会出现上述问题。另请注意，这在很大程度上取决于您的 CPU 需要多少个单元。另请注意，当 CSS 样式更改时，导致 IE 表格呈现性能不佳的是行或列（或多个表格！）中的单元格总数。

我有一种预感（还没有尝试过，但如果你这样做了，我会喜欢你的代码:>）如果 不是改变表格行本身的颜色，而是在前面放置一个透明的 png其中不会导致 IE 重新计算表格尺寸，您将获得所需的性能。它甚至可以放置在您可能已经用来滚动表格的 div 中，这要归功于表格的其他 IE 问题。我猜你可以用这个方法得到一个合适的悬停效果（不完全是你在图形上想到的，但在视觉上是可行的）。

我将我的表格转换为具有固定大小的 div，再次指责 MS 让我在折腾我的设计或浪费项目时间之间做出选择。

【讨论】：

P.S.如果我的漫无边际不清楚，因为您已经在使用 jquery，为什么不尝试使用它来获取 TR 的左上角和右下角的位置，并放置一个绝对定位的带有透明 png 的 div在桌子外面？
请注意，另一个人报告说，如果您将某些样式属性（例如背景）直接应用于元素，而不是将元素类更改为具有所需属性的元素类，IE 将减少重绘工作。跨度>

【解决方案2】：

虽然更改文档类型可能会显示问题，但问题不是由文档类型引起的。我只能怀疑它是由 javascript 引起的，但您需要先解决一些验证问题。验证您的 HTML 中的错误列表。

【讨论】：

我现在将严格示例更改为 html5，并且现在可以正确验证。没有任何区别...如果我将渲染模式更改为 IE7（在 Internet Explorer 8 中），悬停速度很快。
别再搞乱文档类型了！这是页面上的第一件事并且永远不会改变。它应该不会影响浏览器如何处理这个问题，但我们在这里谈论的是 IE，你永远不能相信 IE 会做任何正确的事情。
将其更改为 xhtml strict，删除 javascript 并将悬停更改为 css :hover 。在 IE8 中仍然很慢。