在多个元素上添加 className 的 IE6 性能问题（jQuery tableHover 插件）

StackOverflow https://stackoverflow.com/questions/1402617

题

在我编写的使用大型 HTML 数字表的应用程序中，设计要求突出显示悬停单元格的行和列。

我使用 jQuery 1.3.x 开发了这个项目的所有 JS，并且我发现了 表格悬停 插件完全可以满足我的需要。

但：

在 IE6 上，当单元格元素的数量增加到页面几乎无响应的程度时，该插件的性能会下降。

我认为问题出在插件上，实际上我从头开始重写了它的整个功能，只是发现我也有同样的性能问题。

调试代码后，我现在知道选择大量元素并应用 班级名称 (jQuery.addClass()) 在 IE6 上速度极慢。

我尝试使用 jQuery.css() 而只是 背景颜色, ，性能更好，但同样，当表格单元格数量增加时，性能下降到不可用状态，并且在所有其他浏览器上的性能 jQuery.css() 比 jQuery.addClass().

这里的主要问题是表列没有共同的父级，因此为了设置列的样式，需要遍历整个表，选择每一行，然后找到正确的行 第 n 个孩子 TD. 。我的 jQuery 代码如下所示：

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

我不会将整个代码粘贴到此处，因为它与该问题无关。我正在寻找的唯一答案是：是否有一种已知的方法可以实现我需要的更好的性能裕度？我不是在寻找“Chrome”的性能速度，只是比“无响应”更快。

特纳克斯

汤姆.

有帮助吗？

解决方案

我在非常大的表上处理过性能复杂的jquery IE6. 。以下是我可以为您提供的帮助：

  • 编码 尽可能多 html 中的数据尽可能。例如，对 TD 类或名称属性中的行号和列号进行编码
  • 添加鼠标监听器 全部的 表，然后使用 event.target 获取 TD
  • 解析出您在点 #1 处悬停的单元格的位置
  • 再次，您可能需要添加大量的类，但为每列和每行都有一个类，这样您就可以使用 2 个类选择器选择整行和整列，并向它们添加 css
  • 尽可能多地缓存. 。如果用户从一个单元格移动到另一个单元格，请检查它是否位于您已经突出显示的一行中。我认为这几乎肯定会发生，所以你将有 1/2 选择器操作
  • 缓存您选择的整个列，因此您不必选择两次，行也是如此
  • 看看这个响应能力 插入 我写的，你可能想用它。
  • 另外，还有 其他 我写的主题是编写快速 jquery 插件。

其他提示

通过让浏览器的CSS匹配引擎为您完成工作，减少className更改次数和后续回流次数。例如，对于3x3表：

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

现在你需要做的就是将外表上的className设置为<！> quot; sel-row-（num）sel-col-（num）<！> quot;并且所有单元格将立即更新，这比循环和设置类要快得多。

对于非常多的cols / rows，样式表中的数据量可能变得难以处理。您可以通过document.styleSheets列表动态更改样式表中的规则来解决这个问题，但这需要一些jQuery无法帮助您完成的跨浏览器工作。或者对于具有多行但很少列的表，您可以将选定行类直接放在行上，并且只使用这种方式突出显示列，这仍然只有2-3个类更改。

（如果我们可以像使用jQuery选择器那样使用CSS3 nth-child选择器会很好，但是浏览器支持还没有。）

我想知道是否从jQuery中寻找更好的响应能力，你是不是在看树林？

为什么不在表的顶部包含<colgroup>元素（显式或者，如果需要，通过jQuery动态添加它），然后为匹配所选单元格索引的列指定背景颜色值？

IE6确实支持<=>元素，但仅限于有限的属性。但是，背景颜色是支持的颜色之一，因此您的性能应该会有显着改善。

我应该注意到这一点 - 我是一个比Javascript更好的CSS / HTML开发人员，在深入研究JS之前，我尝试了所有非脚本方法。

我实际上是从 colgroup 开始的，我甚至在同一张桌子上使用它作为列宽，但 colgroup 和 col 元素已设置在表格元素后面，如果 tbody ， tr ， td 或表格中的任何其他元素都有背景（在我的情况下，他们中的许多人都有）， colgroup 不会显示这些元素，并且它没有响应我试图在其上应用的定位或任何其他高级CSS操作。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top