javascript - 原生 Jquery 选择器 VS 缓存 object.find()

Question

我的程序员同胞们，我快疯了。我读过很多关于 JS 性能的书籍，它们都说，最好缓存 DOM 对象以供将来引用和管理，而不是创建新的 Jquery 对象。听起来很有道理。但现在我的信念正在动摇。我正在尝试在我的公司中开发代码约定，并且我打算从性能的 Angular 来解决这个问题。我有一段代码如下:

        $("#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 毫秒。我的方法真的有任何值(value)吗？我的方法是反模式吗？请帮助我!

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