在jQuery中添加属性时，使用attr()方法，将属性作为键值对象传递，还是直接传递，哪种方法执行速度最快?

Which method performs fastest while adding an attribute in jQuery, using attr() method, passing attributes as a key-value object, or direct?

本文关键字：方法 属性 速度 对象 执行 键值 使用 添加 jQuery attr 键值对      更新时间：2023-09-26

我知道在jQuery中添加包含相对链接的href属性的三种方法:使用(1).attr()，(2)属性作为参数中的键值对，或(3)直接编写(您可能知道其他方法，请告诉您的答案以便我学习)。

    使用.attr ()

使用此方法，结果将如下所示:

var link = "relative-link.html";
$("<a/>").attr("href",link);
使用参数

  • : 

    var link = "relative-link.html";
$("<a/>", {href: link});
    直接

  • : 

    var link = "relative-link.html";
$("<a href=" + link + ">");

    那么，这些方法中哪个性能更快呢?为什么我应该选择一种方法而不是其他方法。还要考虑添加其他属性，如class，以及在一次添加多个属性时应该首选哪种方法。

    请告诉我哪种方法更好，在哪种情况下有适当的推理。谢谢!

    这实际上是一个有趣的问题。我在github上查看了jQuery的代码，并建议您应该在这里查看纯粹的学习目的(以及这里的文档)

    这是我的发现

    方法在创建元素时调用，即当您将$(".....")写入init时。代码在这里。它内部使用parseHTML方法。对于简单的单标签HTML, ParseHTML只使用document.createElement(此处)，对于复杂的HTML，则构建DOM节点。init函数接受的两个参数是selector和context - selector是HTML字符串，context是您在第二个方法中作为参数传递的属性对象。

    添加属性时调用的方法为attr。此处代码

    方法1
    $("<a/>").attr("href",link);
    这里，jQuery首先创建一个元素。然后分别尝试向创建的元素添加属性。init函数不接受context参数。它只是在内部使用document.createElement添加一个基本的<a>元素。这部分代码永远不会执行，并返回新创建的对象。然后在创建的jQuery包装DOM对象上调用attr方法。因此init被调用一次，attr也被调用一次。即使您要在同一个attr()调用中传递多个属性，它仍然会被调用一次。

    方法2
    $("<a/>", {href: link});
    这里，jQuery尝试在创建DOM元素的同时添加属性。它现在接收context，这是要添加到元素的属性。它在这个属性映射上迭代，分别为每个属性调用attr()方法(可以在这里看到)。这相当于$("<a>").attr(key, val).attr(key1, val1).attr(key2, val2); ，因此init被调用一次，而attr在内部被调用多次。

    方法3


    $("<a href=" + link + ">");
    这里，jQuery同样没有接收任何context参数。它只接收一个需要解析的纯HTML字符串。如文档所述，在这种情况下，如果HTML比单个结束标记更复杂，jQuery将使用buildFragment方法(此处的代码)构建DOM节点，并使用innerHTML方法将传递的HTML插入到文档中。这发生在jQuery的parseHTML函数中，该函数内部调用buildFragment。因此只调用一次init，它必须在内部构建节点。不调用attr .

    因此，方法2实际上将对attr的调用封装在同一个DOM元素创建调用中，并提供了一种更具可读性的形式。然而，我认为方法1与方法2具有相同的可读性，并且应该比方法2更快。在方法3中(正如性能测试后来表明的那样)，构建DOM节点需要花费很多时间，因为所有东西都必须经过buildFragment阶段，而方法1和方法2的情况不同，方法1和方法2传递单个标记html，然后直接使用document.createElement。

    对于单个元素创建，您几乎不会注意到执行时间上的任何差异。这只需要不到几毫秒的时间。我为100,000个元素创建了这个测试，看看是否有任何差异。注释掉要测试的方法，以获得执行时间。

    方法1:耗时:400-600ms(最快)
    方法二:用时:550-700ms
    方法3:耗时:2700-2900ms(预期最慢)

    时代可能变化，但趋势将保持不变。该测试可在这里获得http://jsfiddle.net/6ko59joo/2/。试试吧

    选项:No jQuery

    到目前为止尚未讨论的是离开jQuery并使用普通JS的选项。在这种情况下，上述测试的性能将跃升至70-80ms。它的代码是:

    var a = document.createElement('a'); 
a.href = link;

    为了您的考虑，它也包含在jsFiddle中。

    这是基于我的理解和测试。如果我错了，我希望得到纠正。

    相关文章：