Question

以下陈述之间有什么区别？

$("#txt").val("123");

和

var txt=$("#txt");
txt.val("123");

哪一个最有效？

Answer 1

两个版本都经历了查找相关dom元素和设置值的动作

除非您需要再次引用，否则执行其中一个操作没有任何好处。考虑一下：

if ( $("#txt").val()!='123' )
  $("#txt").val("123");

// vs. 

var txt=$("#txt");
if ( txt.val()!='123' )
  txt.val("123");

后者效率更高，因为您只需要查看一次元素。

但是如果你只是设置它..你的例子中的任何一种方式都将是相同的工作量。稍微首先设置一个变量会产生更多的开销，但没有什么可以动摇...但即使是上述情况也不值得摇晃任何一根，除非你喜欢镍和瞄准几微秒。

Answer 2

在您的代码中，如果您只需要一次定位所需的元素选择器：

$("#txt").val("123"); // is just fine

但是大多数时候程序员需要多次引用同一个元素，并且为了提高整体应用程序性能，他们将选择器存储到一个可变内存插槽中：

var txt  = $("#txt");
var input = $("#someInput");

input.on('input', function() {
   txt.val( this.value ); // *
});

txt.addClass('selected'); // JS says "hey I know this guy!"

此时，JS并不需要遍历整个文档，在每个keyup / keydown或其他输入事件中查找#txt输入。你能想象这个好处吗？

Answer 3

如果您将多次使用#txt的值进行操作，最好像在第二个版本中那样缓存选择器，如果您将要使用多个对象倍。最后，通过使用一种方法v。另一种方法，你可能不会注意到任何可观的性能提升。

至于定量数据：

versionOne(): 0.0359999998472631
versionTwo(): 0.02500000037252903

此测试似乎表明第一个测试速度较慢，使用window.performance。运行此操作时，请务必清空浏览器缓存。

(function() {
    var v1 = [];
    var v2 = [];
    function avg(data) {
        var sum = 0
        for(var i = 0; i < data.length; i++) {
            sum += data[i];
        }
        return sum / data.length;
    }
    function versionOne() {
        $("#txt").val('hello');
    }
    function versionTwo() {
        var txt=$("#txt");
        txt.val("123");
    }
    for(var i = 0; i < 1000; i++) {
        var start = window.performance.now();
        versionOne();
        var end = window.performance.now();
        v1.push(end - start);

        var start = window.performance.now();
        versionTwo();
        var end = window.performance.now();
        v2.push(end - start);
    }

    console.log("versionOne(): " + avg(v1));
    console.log("versionTwo(): " + avg(v2));

})();

Fiddle

dom引用vs存储dom引用

3 个答案: