本机Jquery选择器VS缓存对象.find(）

native Jquery selector VS cached object.find()

本文关键字：find 对象 缓存 Jquery 选择器 VS 本机      更新时间：2023-09-26

我的程序员同事们，我疯了。我读过很多关于JS性能的书，他们都说，最好缓存DOM对象以备将来引用和管理，而不是创建新的Jquery对象。这听起来很合理。但现在我的信仰正在动摇。我试图在我的公司中开发代码约定，我打算从性能的角度来解决这个问题。我有一段代码如下：

        $("#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");

我测试了最新铬的性能，非常震惊！我的方法是3-4次失败。我的意思是，我的功能运行时间是42毫秒，而旧的是12-14毫秒。我的方法真的有价值吗？我的方法是反模式的吗？请帮帮我！

由于所有选择器都是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允许链接，上述内容也可以写成

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

顺便说一句，实际上您似乎想要使用prop()而不是attr()，并且这些函数也接受值映射：

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

因为您是通过元素的Id来查找元素的。所有浏览器都有一个getElementById，这是获取元素的最有效方法。

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

相关文章：