Question

我的同事们，我失去了理智。我已经阅读了很多关于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毫秒。真的对我的方法有任何价值吗？我的方法是反模式吗？请帮帮我！

Answer 1

由于您的所有选择器都是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});

Answer 2

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

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

本机Jquery选择器VS缓存的object.find（）

2 个答案: