Question

我已经读过通过变量通过jQuery访问对象或集合比通过内联代码重复访问它们更有效。即使在简单的测试中，这似乎也是如此：

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script src="/jquery-1.5.1.js"></script>
        <script>
        var SomeChoiceRadios;

        $(document).ready(function(){
            SomeChoiceRadios = $("#MyForm input:radio[name='SomeChoice']");
        });

        function DoStuff()
        {
            console.profile('Optimized'); 

            for (i=0; i < 10000; i++)
                foo = SomeChoiceRadios.filter(":checked").val();

            console.profileEnd(); 
        }

        function DoStuff2()
        {
            console.profile('Inline'); 

            for (i=0; i < 10000; i++)
                foo = $("#MyForm input:radio[name='SomeChoice']:checked").val();

            console.profileEnd(); 
        }
        </script>

        <form id="MyForm" name="MyForm">
        <input type="radio" name="SomeChoice" value="0">0<br>
        <input type="radio" name="SomeChoice" value="1">1<br>
        <input type="radio" name="SomeChoice" value="2">2<br>
        <input type="radio" name="SomeChoice" value="3">3<br>
        <input type="radio" name="SomeChoice" value="4">4<br>
        <input type="radio" name="SomeChoice" value="5">5<br>
        <input type="button" value="Time" onclick="DoStuff()">
        <input type="button" value="Time" onclick="DoStuff2()">
        </form>
    </body>
</html>

鉴于以上示例，如果我尝试使用变量访问它，是否有更快的方法来获取 SomeChoice 选中的单选按钮的值（即 SomeChoiceRadios ）？

Answer 1

我猜这对于较大的选定版本不适用，但这似乎比优化版本更快。 See the modified demo here ->

function DoStuff3() {
    console.profile('ReallyOptimized');

    for (i = 0; i < 10000; i++) {
        $.each(SomeChoiceRadios, function() {
            if (this.checked) foo = this.value;
        });
    }

    console.profileEnd();
}

Answer 2

这看起来对我很好。您实际上会注意到性能损失的情况主要在于边缘。你可能花费数小时试图改进你的jQuery，甚至没有说明浏览器的区别。

我是变量的忠实粉丝，但因为它确实使代码更易于维护并且效率更高。

jQuery，变量和单选按钮

2 个答案: