3

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

我使用 jQuery 1.3.x 为这个项目开发了所有的 JS，我发现tableHover插件正是我需要的。

但：

在 IE6 上，随着单元格元素的数量上升到页面几乎没有响应的程度，该插件的性能下降。

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

调试代码后，我现在知道在 IE6 上选择大量元素并应用className ( jQuery.addClass() ) 非常慢。

我尝试使用jQuery.css()而不是仅使用background-color，性能更好，但同样，当表格单元格数量上升时，性能下降到不可用状态，并且在所有其他浏览器上jQuery.css的性能()比jQuery.addClass()慢得多。

这里的主要问题是表列没有共同的父级，因此为了设置列的样式，需要遍历整个表，选择每一行，然后找到正确的nth-child 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”的性能速度，只是比“无响应”更快。

纳克斯

汤姆。

4

4 回答 4

2

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

  • 在 html 中编码尽可能多的数据。例如，对 TDs 类或名称属性中的行号和列号进行编码
  • 为整个表添加鼠标侦听器，然后使用 event.target 获取 TD
  • 解析出您悬停在表格点 #1 的单元格的位置
  • 再次，您可能必须添加大量类，但每列和每一行都有一个类，这样您就可以使用 2 个类选择器选择整行和整列，并向它们添加 css
  • 尽可能缓存。如果用户从一个单元格移动到另一个单元格，请检查它是否连续突出显示。我认为这几乎可以保证发生，所以你将有 1/2 的选择器操作
  • 缓存您选择的整个列，因此您不必选择两次，行相同
  • 看看我写的这个响应插件，你可能想要使用它。
  • 此外，我还写了一篇关于编写快速 jquery 插件的文章。
于 2009-09-10T00:15:23.020 回答
2

通过让浏览器的 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 设置为“sel-row-(num) sel-col-(num)”，所有单元格将立即更新，这将比循环和设置类快得多。

对于大量的列/行，样式表中的数据量可能会变得难以处理。您可以通过 document.styleSheets 列表动态更改样式表中的规则来解决这个问题，但这需要一些 jQuery 无法帮助您完成的跨浏览器工作。或者对于一个行多列少的表，可以直接把selected-row类放在行上，这样只做列高亮，还是只有2-3个类的变化。

（如果我们可以像在 jQuery 选择器中那样使用 CSS3 nth-child 选择器，那就太好了，但目前还没有浏览器支持。）

于 2009-09-10T00:43:46.817 回答
1

我想知道在从 jQuery 中寻找更好的响应能力时，您是否没有只见树木不见森林？

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

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

于 2009-09-09T23:34:38.757 回答
1

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

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

于 2009-09-09T23:49:50.870 回答