Question

我遇到了性能问题。我有一个500行的表格，我试图隐藏其中的列，并在等待10秒钟。

<table>
<thead>
<th class="c1">ColumnName1</th>
<th class="c2">ColumnName2</th>
</thead>
<tbody>
<td class="c1">data</td>
<td class="c2">data</td>
</tbody>
</table>

我喜欢使用smth

jQuery('.c2').hide();

任何人都可以给我建议如何提高这个问题的速度。

谢谢！

Answer 1

五百行非常多，所以我知道你可能会遇到一些性能问题。您可以尝试提供更具体的选择器。试试这个例子：

jQuery('td.c2').hide();

或者在表格中添加ID，以使其更加具体

jQuery('#yourTableId td.c2').hide();

您可能还会发现这篇关于jQuery选择器性能有用的文章：

jQuery Performance Rules

根据该文章的内容，您可能最好做这样的事情：

jQuery("#yourTableId").find("td.c2").hide();

// Or if you intend to do more than one operation on your set of elements, 
// cache the set of elements in a variable, so that the selector is only run once

var myElements = jQuery("#yourTableId").find("td.c2");
myElements.hide();
myElements.remove(); // Do some other stuff to your elements

// Or make use of the chaining
jQuery("#yourTableId").find("td.c2").hide().remove();

Answer 2

指定id元素

时，第一次jQuery dom遍历会更快

$("#myTable .c2").hide();

或添加上下文

$('.class', '#class-container').hide();

Answer 3

我认为如果您先按ID选择表然后使用.find（）会更快一些。选择表格将为搜索设置上下文，而不是遍历整个文档。

您还可以在按类选择时预先标记tagName。

$("#myTable").find('td.c2')

Answer 4

您可以使用更有效的选择器。例如，在表上放置一个id并按行搜索，对于类c2的td。

jQuery("#table_id > tr > td.c2").hide();

使用选择器“＆gt;”告诉jQuery选择直接子节点而不是搜索父节点内的所有标签。

Answer 5

这实际上取决于不同的事情，例如：

您正在测试的浏览器（在渲染和整体JS引擎方面，Internet Explorer 7和8比Chrome和Mozilla慢得多）
每列需要隐藏的html数量

您应该考虑在服务器端解决此问题（如果您使用的是ASP，JSP，PHP等）并发送回操作的HTML。如今人们认为一切都可以用纯JavaScript来处理。尽管现代Web浏览器变得越来越快，但仍然存在“传统”服务器端Web开发的用例。

另一件事（只需要你测试一下）：也许您可以尝试使用visibility: collapse而不是display: none（jQuery在调用hide()时使用。

Answer 6

再次是我。）我想谈谈我是如何决定这个问题的我需要提高性能，同时我处理汇合和我的工作。
在这个动作中，我用html代码生成json，然后将其发回此代码是表依赖于过滤器参数的delta。而且我还使用了confluence缓存的优点。最后一个perfomanse结果小于100毫秒。答对了）） Thnx全部回复

P.S。 2Christofer Eliasson 我尝试使用性能规则，但它并没有提高性能，但无论如何感谢有用的链接。我将来会尝试使用这个好习惯）

尝试隐藏表中的行时的jQuery性能

6 个答案: