Dom引用vs存储Dom引用

dom referenceing vs storing dom reference

本文关键字：Dom 引用 存储 vs      更新时间：2023-09-26

以下语句的区别是什么?

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

和

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

哪一个是最有效的?

两个版本都是查找相关的dom元素并设置值

除非您需要再次引用它，否则执行其中一个操作或另一个操作没有任何好处。想想看:
if ( $("#txt").val()!='123' )
  $("#txt").val("123");
// vs. 
var txt=$("#txt");
if ( txt.val()!='123' )
  txt.val("123");

后一种方法更有效，因为您只查找元素一次。

但是如果你只是简单地设置它…在你的例子中，两种方法的工作量都是一样的。稍微从设置变量开始增加了一些开销，但是没有什么可以动摇的…但即使是上述情况也不值得大惊小怪，除非你喜欢微秒的瞬间。

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

$("#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或其他input事件上寻找您的#txt输入。你能想象其中的好处吗?

如果要对#txt的值进行不止一次的操作，那么如果要多次使用该对象，最好像在第二个版本中那样缓存选择器。最后，您可能不会注意到使用一种方法比使用另一种方法有任何显著的性能提高。

定量数据:

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));
})();

小提琴

相关文章：