Question

由于我使用jQuery 1.3+除了一次定时测试之外都使用它。另一个是我在2000年后期发现的普通javascript。我停止了那条路，因为它需要大约150秒来运行测试。我已经阅读了很多与选择单个元素相关的jQuery优化网页。 “#id”是使用它的最佳情况，但现在我遇到了检查具有多个复选框列的相当大的表中的一列中的所有复选框的问题。

我所做的是设置一个页面，创建20,000个表行和两个复选框列。目标是检查第二列是否花了多长时间，然后取消选中它们，看看花了多长时间。显然我们想要最短的时间。我只使用IE6和7，在我的情况下，我的所有用户都会这样做。

你说20,000行？这就是我所说的，但这是生产（从我手中），现在改变为时已晚。我只是试着在时钟上留下1秒的冰雹玛丽。此外，我了解到input.chkbox不是最快的选择器（对于IE7）！：）

问题是，是否有更好的方法来执行此jQuery或其他方式？我喜欢它在我的机器上运行不到半秒钟。

所以你不必重新输入我已经完成的所有垃圾，这是我提出的测试内容：

4月14日上午更新，以包含更多时间试验：

<form id="form1" runat="server">
<div>           
        <a href="#" id="one">input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="two">#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="three">#myTable tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="four">tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="five">input[id^='chkbox']</a><br />
        <a href="#" id="six">.chkbox</a><br />
        <a href="#" id="seven">input.chkbox</a><br />
        <a href="#" id="eight">#myTable input.chkbox</a><br />

        <a href="#" id="nine">"input.chkbox", "tr"</a><br />
        <a href="#" id="nine1">"input.chkbox", "tr.myRow"</a><br />
        <a href="#" id="nine2">"input.chkbox", "#form1"</a><br />
        <a href="#" id="nine3">"input.chkbox", "#myTable"</a><br />

        <a href="#" id="ten">input[name=chkbox]</a><br />
        <a href="#" id="ten1">"input[name=chkbox]", "tr.myRow"</a><br />
        <a href="#" id="ten2">"input[name=chkbox]", "#form1"</a><br />
        <a href="#" id="ten3">"input[name=chkbox]", "#myTable"</a><br />

        <a href="#" id="ten4">"input[name=chkbox]", $("#form1")</a><br />
        <a href="#" id="ten5">"input[name=chkbox]", $("#myTable")</a><br />

        <a href="#" id="eleven">input[name='chkbox']:checkbox</a><br />
        <a href="#" id="twelve">:checkbox</a><br />
        <a href="#" id="twelve1">input:checkbox</a><br />
        <a href="#" id="thirteen">input[type=checkbox]</a><br />

        <div>
            <input type="text" id="goBox" /> <button id="go">Go!</button>
            <div id="goBoxTook"></div>
        </div>

        <table id="myTable">
            <tr id="headerRow"><th>Row #</th><th>Checkboxes o' fun!</th><th>Don't check these!</th></tr>
            <% for(int i = 0; i < 20000;i++) { %>
            <tr id="row<%= i %>" class="myRow">
                <td><%= i %> Row</td>
                <td>
                    <input type="checkbox" id="chkbox<%= i %>" name="chkbox" class="chkbox" />
                </td>
                <td>
                    <input type="checkbox" id="otherBox<%= i %>" name="otherBox" class="otherBox" />
                </td>
            </tr>
            <% } %>
        </table>
</div>
        <script type="text/javascript" src="<%= ResolveUrl("~/") %>Javascript/jquery.1.3.1.min.js"></script>
        <script type="text/javascript">

            $(function() {                  
                function run(selectorText, el) {                    
                    var start = new Date();                     
                    $(selectorText).attr("checked", true);                              
                    var end = new Date();
                    var timeElapsed = end-start;
                    $(el).after("<br />Checking Took " + timeElapsed + "ms");

                    start = new Date();                     
                    $(selectorText).attr("checked", false);                             
                    end = new Date();
                    timeElapsed = end-start;
                    $(el).after("<br />Unchecking Took " + timeElapsed + "ms");
                }       

                function runWithContext(selectorText, context, el) {                    
                    var start = new Date();                     
                    $(selectorText, context).attr("checked", true);                             
                    var end = new Date();
                    var timeElapsed = end-start;
                    $(el).after("<br />Checking Took " + timeElapsed + "ms");

                    start = new Date();                     
                    $(selectorText, context).attr("checked", false);                                
                    end = new Date();
                    timeElapsed = end-start;
                    $(el).after("<br />Unchecking Took " + timeElapsed + "ms");
                }

                $("#one").click(function() {                        
                    run("input[id^='chkbox'][type='checkbox']", this);
                });

                $("#two").click(function() {
                    run("#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']", this);
                });

                $("#three").click(function() {
                    run("#myTable tr.myRow input[id^='chkbox'][type='checkbox']", this);
                });

                $("#four").click(function() {
                    run("tr.myRow input[id^='chkbox'][type='checkbox']", this);
                });

                $("#five").click(function() {
                    run("input[id^='chkbox']", this);
                });

                $("#six").click(function() {
                    run(".chkbox", this);
                });

                $("#seven").click(function() {
                    run("input.chkbox", this);
                });

                $("#eight").click(function() {
                    run("#myTable input.chkbox", this);
                });

                $("#nine").click(function() {
                    runWithContext("input.chkbox", "tr", this);
                });


                $("#nine1").click(function() {
                    runWithContext("input.chkbox", "tr.myRow", this);
                });
                $("#nine2").click(function() {
                    runWithContext("input.chkbox", "#form1", this);
                });
                $("#nine3").click(function() {
                    runWithContext("input.chkbox", "#myTable", this);
                });

                $("#ten").click(function() {
                    run("input[name=chkbox]", this);
                });                 

                $("#ten1").click(function() {
                    runWithContext("input[name=chkbox]", "tr.myRow", this);
                });

                $("#ten2").click(function() {
                    runWithContext("input[name=chkbox]", "#form1", this);
                });

                $("#ten3").click(function() {
                    runWithContext("input[name=chkbox]", "#myTable", this);
                });

                $("#ten4").click(function() {
                    runWithContext("input[name=chkbox]", $("#form1"), this);
                });

                $("#ten5").click(function() {
                    runWithContext("input[name=chkbox]", $("#myTable"), this);
                });

                $("#eleven").click(function() {
                    run("input[name='chkbox']:checkbox", this);
                });

                $("#twelve").click(function() {
                    run(":checkbox", this);
                });

                $("#twelve1").click(function() {
                    run("input:checkbox", this);
                });

                $("#thirteen").click(function() {
                    run("input[type=checkbox]", this);
                });

                $('#go').click(function() {
                    run($('#goBox').val(), this);
                });
            });
        </script>
</form>

Answer 1

输入[name = chkbox] 作为IE7下我机器上最快的jQuery选择器出现。

Unchecking Took 2453ms
Checking Took 2438ms
Unchecking Took 2438ms
Checking Took 2437ms
Unchecking Took 2453ms
Checking Took 2438ms

input.chkbox 和...

Unchecking Took 2813ms
Checking Took 2797ms
Unchecking Took 2797ms
Checking Took 2797ms
Unchecking Took 2813ms
Checking Took 2797ms

输入：checkbox.chkbox 似乎并列

Unchecking Took 2797ms
Checking Took 2797ms
Unchecking Took 2813ms
Checking Took 2781ms

.chkbox 差不多是input.chkbox的两倍

Unchecking Took 4031ms
Checking Took 4062ms
Unchecking Took 4031ms
Checking Took 4062ms

javascript for循环是迄今为止最糟糕的：

Checking Took 149797ms

150秒！它也会锁定浏览器。这让我对jQuery印象深刻。老实说，我没想到它会那么慢。可能是因为我正在通过每个单独的元素，然后它必须找到...

这对我来说非常有趣：

<强>输入[ID ^ = 'chkbox']

Unchecking Took 3031ms
Checking Took 3016ms

少时间比：

<强>输入[ID ^ = 'chkbox'] [式= '复选框']

Unchecking Took 3375ms
Checking Took 3344ms

我想，因为我发布了更多过滤器，所以它会更快。都能跟得上！

指定更多复选框的路径会使速度变慢：

#myTable tr [id ^ ='row']输入[id ^ ='chkbox'] [type ='checkbox']

Checking Took 10422ms

它甚至没有运行第二次取消检查，因为它问我是否要继续在我的计算机上运行脚本。疯！：P

更新4月14日上午：

有人提出设置上下文：我实际上做了一些这些并且很多我的惊喜和许多人在网上说了什么在IE7上这些更慢！以下是我指定的几个不同上下文与上面的快速选择器配对的时间：

“input.chkbox”，“tr”

Checking Took 8546ms

“input.chkbox”，“tr.myRow”

Checking Took 8875ms

“input.chkbox”，“＃form1”

Unchecking Took 3032ms
Checking Took 3000ms

“input.chkbox”，“＃myTable”

Unchecking Took 2906ms
Checking Took 2875ms

当前获胜者（仍然）：输入[name = chkbox]

Unchecking Took 2469ms
Checking Took 2453ms

“输入[name = chkbox]”，“tr.myRow”

Checking Took 9547ms

“输入[name = chkbox]”，“＃form1”

Unchecking Took 3140ms
Checking Took 3141ms

“输入[name = chkbox]”，“＃myTable”

Unchecking Took 2985ms
Checking Took 2969ms

更新2上午4/14

在我注意到与http://beardscratchers.com/journal/jquery-its-all-about-context的语法差异后，我可能会有一个更好的。似乎这些与它们提供稍微好一些的时间不一样，但仍然没有击败非上下文选择器 - darn。

“input [name = chkbox]”，$（“＃form1”）

Unchecking Took 3078ms
Checking Took 3000ms
Unchecking Took 3078ms
Checking Took 3016ms

“输入[name = chkbox]”，$（“＃myTable”）

Unchecking Took 2938ms
Checking Took 2906ms
Unchecking Took 2938ms
Checking Took 2921ms

更新3上午4/14

Russ希望我尝试这些，他们会选择所有方框，但这又很有趣：

<强>：复选框

Unchecking Took 8328ms
Checking Took 6250ms

<强>输入：复选框

Unchecking Took 5016ms
Checking Took 5000ms

- ＆GT;最快的？！？！的输入[类型=复选框]

Unchecking Took 4969ms Checking Took 4938ms

第三个最快的事实是非常有趣的，因为这违背了我的想法。为什么不（至少IE7）：复选框只使用type =复选框来实现更快的时间？这些都是非常接近的分数，但检查时间减少了62毫秒。另外，为什么前两个会有所不同？除了输入之外是否还有一个可以带有复选框的元素？

Answer 2

我没有对此进行过测试，但您可以尝试在页面加载时构建一个复选框引用的数组[]，然后在每次要进行更改时简单地迭代它？

您需要在页面加载时支付性能成本，但可能比每次遍历DOM更快。嘿，至少你会在用户“停机时间”中执行繁重的工作（人们找到并点击取消选择/选择选项需要多长时间）。

Answer 3

我唯一的建议可能也不会奏效。切换浏览器。但我只有一家公司真的同意这一点。我们让公司切换到FireFox，特定用户转移到Google Chrome。使用JavaScript，IE速度太慢了。

此外，您可以尝试预缓存jquery查询列表。

如果一切都失败了，请用心理学来解决。这意味着让用户知道某些事情需要花费很长时间。在功能执行时设置“请等待”div。这样，用户就知道浏览器不仅被锁定，而且他们知道何时可以恢复工作。通过这样做，我已经有很多慢速页面“解决了”。

Answer 4

您是否尝试过使用context的jQuery选择器来查看是否可以提高性能？据推测，控件将在ASP.NET表单中，也许是另一个可识别的唯一元素？

例如，你有

的地方

$("input[id^='chkbox']")

尝试

$("input[id^='chkbox']", "#myFormID")

上下文

Here's a BeardScratchers article

修改

根据您的情况，根据您的更新，似乎2.45-6秒可能是您可以实现的最快速度。

为了完整起见，您是否尝试过以下选择器？

$(':checkbox') $('input[type=checkbox]')

选择大量复选框和取消选择它们的最快方法是什么？

4 个答案: