Javascript 本机Jquery选择器与缓存对象.find（）的比较

我的程序员们，我正在失去理智。我读过很多关于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");

我已经在最新的chrome上测试了性能，感到震惊！我的方法失败了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");

因为，上述内容也可以写成

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

顺便说一句，您实际上似乎想要使用，并且这些函数也接受：

---

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

因为，上述内容也可以写成

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

顺便说一句，您实际上似乎想要使用，并且这些函数也接受：

---

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

---

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

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

---

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

这不是“缓存引用”的意思。我认为在

find（）

中的ID选择器中使用它是无用的，您应该做的是类似var

$registorType=$（'#registorType'）；[…]

缓存查找，如

var registortype=$（“#registortype”）

然后使用

registratorType.attr（）

，因为

registratorType

变量是一个jQuery对象，这不是“缓存引用”的意思。我认为在

find（）

中的ID选择器中使用它是没有用的，您应该做的事情类似于var

$registratorType=$（“#registratorType”）；[…]

缓存查找，如

var registortype=$（“#registortype”）

然后使用

registratorType.attr（）

作为jQuery对象的

registratorType

变量，您还可以将映射传递到

.attr（）

一次设置多个属性：

$（“#id”）.attr（{“readonly”：“readonly”，“size”：“25”）（如果在包含多个元素的jQuery对象上使用，这会明显提高性能）。因此，底线是，除了DOM树的丑陋之外，通过id对元素进行寻址没有其他缺点，除了那些名称被保留，不能在DOM树中使用。例如，如果我在页面上有两个类似的表单，我就可以在ID前面加上前缀，从而获得更好的性能？@user1929437:可能是的。但是，如果您正确地进行缓存（将对DOM元素的引用存储在变量中），以便在整个应用程序运行时只进行一次DOM选择，您将不会注意到它。您还可以将映射传递到
.attr（）
以一次设置多个属性：
$（“#id”）.attr（{“readonly”：“readonly”，“size”：“25”}）（如果在包含多个元素的jQuery对象上使用，这会明显提高性能）。因此，底线是，除了DOM树的丑陋之外，通过id对元素进行寻址没有其他缺点，除了那些名称被保留，不能在DOM树中使用。例如，如果我在页面上有两个类似的表单，我就可以在ID前面加上前缀，从而获得更好的性能？@user1929437:可能是的。但是，如果您正确地进行缓存（在变量中存储对DOM元素的引用），以便在整个应用程序运行时只进行一次DOM选择，您将不会注意到它。因此，底线是除了DOM树的丑陋之外，没有其他缺点，在通过id对元素进行寻址时，这些名称以外的元素被保留，不能在DOM树中使用。例如，如果我在页面上有两个相似的表单，我可以在ID前面加上前缀，从而获得更好的性能？理论上是的，我读到一些浏览器在500个不同的ID后性能会下降，但我从来没有坐过或亲自尝试过。所以底线是，除了DOM树的丑陋之外，没有其他缺点，在通过id对元素进行寻址时，这些名称以外的元素被保留，不能在DOM树中使用。例如，如果我在页面上有两个类似的表单，我可以在ID前面加上前缀，从而获得更好的性能？理论上是的，我读到一些浏览器在500个不同的ID后性能会下降，但我自己从未尝试过。