原生Jquery选择器VS缓存object.find（）

我的其他程序员，我失去了我的想法。我关注了JS性能方面的许多书籍，并且他们都在说，最好是将DOM对象缓存以备将来参考和管理，而不是创建新的Jquery对象。这听起来很合理。但现在我的信仰在颤抖。我试图在我的公司开发代码约定，我正想从一个性能角度来解决这个问题。我有一段代码如下：原生Jquery选择器VS缓存object.find（）

 $("#registratorType").attr("readonly", "readonly"); 
     $("#registratorType").attr("size", "25"); 
     $("#id").attr("readonly", "readonly"); 
     $("#id").attr("size", "25"); 
     $("#serial").attr("readonly", "readonly"); 
     $("#serial").attr("size", "25"); 
     $("#duration").attr("size", "25"); 
     $("#stoppingDuration").attr("size", "25"); 
     $("#speeddata").removeAttr("disabled");

它不是整个事情，但我认为，你已经有了这个想法。我将获得所有这些表单并将其包装在缓存的参考中。

var $form = $('#vehicleProfile'); 
    $form.find("#registratorType").attr("readonly", "readonly"); 
    $form.find("#registratorType").attr("size", "25"); 
    $form.find("#id").attr("readonly", "readonly"); 
    $form.find("#id").attr("size", "25"); 
    $form.find("#serial").attr("readonly", "readonly"); 
    $form.find("#serial").attr("size", "25"); 
    $form.find("#duration").attr("size", "25"); 
    $form.find("#stoppingDuration").attr("size", "25"); 
    $form.find("#speeddata").removeAttr("disabled");

我已经测试了最新的chrome中的性能，并且感到震惊！我的方法失败了3-4次。我的意思是我的功能运行在42毫秒，而老的是12-14毫秒。对我的方法有没有真正的价值？我的方法是反模式吗？请帮帮我！

来源

2013-02-06 user1929437

这不是“缓存参考”的含义。 – Bergi

我认为在'find（）'中使用ID选择器是无用的，你应该做的就像var'$ registratorType = $（'#registratorType'）; [']' –

缓存_finds_ like'var registratorType = $（“#registratorType”）;'然后使用'registratorType.attr（）'作为'registratorType'变量是一个jQuery对象 – andyb

由于所有的选择器都是id选择器，所以它们相当快（document.getElementById是O(1)表查找）。但是，将它们限制为使用find()的某个父元素，则需要进行DOM树搜索，这是明显的减速。

“缓存未来引用的DOM对象”意味着您永远不会应用相同的选择器两次。做一次，并将其存储在一个变量中（就像您使用$form一样）。因此，而不是

$("#id").attr("readonly", "readonly"); 
    $("#id").attr("size", "25");

应该

var $id = $("#id"); 
    $id.attr("readonly", "readonly"); 
    $id.attr("size", "25");

由于jQuery allows chaining，上面也可以写成

$("#id").attr("readonly", "readonly").attr("size", "25");

顺便说一句，你实际上似乎想用prop() instead of attr()，和这些功能也接受value maps：

$("#id").prop({readonly: true, size: 25});

来源

2013-02-06 10:13:49 Bergi

您也可以传递一个map （'“readonly”：“readonly”，“size”：“25”}）;'如果用在包含多个元素的jQuery对象上，性能会得到改进）。 – nnnnnn

所以底线是，除了DOM树的丑陋之外，除了那些名称被保留并且不能在DOM树中使用，通过id寻址元素之外，没有其他缺点。例如，如果我在页面上有两个相似的表单，我可以在ID的前面加上前缀并获得更好的性能？ – user1929437

@ user1929437：是的，可能。但是，如果您正确地执行了缓存（将DOM元素的引用存储在变量中），以便在整个应用运行时只进行一次DOM选择，您将不会注意到它。 – Bergi

因为你是通过他们的ID找到元素。所有浏览器都有一个getElementById，它是获取元素的最有效方法。

用类标识的元素重试你的基准。

来源

2013-02-06 10:14:03

所以底线是，除了DOM树的丑陋之外，除了这些名称被保留并且不能在DOM树中使用，通过id寻址元素之外，没有其他缺点。例如，如果我在页面上有两个相似的表单，我可以在ID的前面加上前缀并获得更好的性能？ – user1929437

理论上是的，我读过一些浏览器在500个不同的ID后有一个性能下降，但我从来没有自己尝试过。 –

原生Jquery选择器VS缓存object.find（）

回答

相关问题