Question

我目前遇到的问题是JQuery UI标签导致浏览器在将大表加载到选项卡时变慢。我正在运行JQuery 1.4.2和JQuery UI 1.8.4。使用此大表单击选项卡内的任何位置会导致CPU上升到50％。如果您有一列复选框可以点击，那么速度会更慢。但是，当您尝试突出显示表格中的任何文本时，这一点也很明显。

到目前为止，我已经测试了以下内容：

1）带有500行表的JQuery UI选项卡。

2）包含500行数据的JQuery UI选项卡（用p和span标签替换表格）。

3）只有500行表

案例＃1是最慢的案例＃2反应灵敏，但表格布局现已消失案例＃3是最快的，没有任何滞后时间。

我已尝试使用FireBug探查器查看可能正在执行的内容，但它返回时没有任何活动。此时我很难过。

以下是案例＃1的代码段：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Tabs + 500 row table</title>

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>

    <link href="css/jquery-ui-1.8.custom.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript">
    $(document).ready(function() {
      $("#tabs").tabs();
    });
    </script>
    </head>
    <body>

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">500 Rows</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>
      <div id="tabs-1">

<!-- Insert Large data table here.  500+ rows -->

<!--
  Small sample starter table.  Pasting a 500 row table here would be too much.  
  <table>
    <tr>
       <td><input type="checkbox"/></td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
       <td>column 6</td>
    </tr>
  </table>
-->

</div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>


</body>
</html>

Answer 1

我设法用一种“黑客”来解决这个问题。我只是在加载选项卡后从选项卡中删除了ui-widget类，并且我不再拥有大表的高CPU使用率。

$("#tabs").removeClass("ui-widget");

我能够安全地删除它，因为除了设置字体类型和大小之外，这个类对选项卡的实际样式添加的很少。

Answer 2

这可能与此处提到的错误有关：http://bugs.jqueryui.com/ticket/6757

中的CSS更改

.ui-widget :active {
    outline: none;
}

到

.ui-widget:active {
    outline: none;
}

JQuery UI选项卡缓慢响应500+行表

2 个答案: