0

我的程序员伙伴们，我正在失去理智。我读过很多关于 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 毫秒。我的方法真的有任何价值吗？我的方法是反模式吗？请帮帮我！

4

2 回答 2

2

由于您的所有选择器都是 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});
于 2013-02-06T10:13:49.537 回答
1

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

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

于 2013-02-06T10:14:03.263 回答