javascript - 使用attr()方法，将属性作为键值对象或直接传递时，哪种方法在jQuery中添加属性时执行最快？

Question

Closed. This question is opinion-based。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，以便 editing this post用事实和引用来回答。
                        
                        4年前关闭。
                                                                                            
                
        
我知道添加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的代码，建议您出于纯粹的学习目的而查看相同的here（以及文档here）

这是我的发现

一般来说
创建元素时（即编写$(".....")时）调用的方法是init。 Code here。它在内部使用parseHTML method。对于简单的单标签HTML，ParseHTML将仅使用document.createElement（here），而对于复杂的HTML，则将构建DOM节点。 init函数接受的两个参数是selector和context-selector是HTML字符串，而context是您在所指出的第二种方法中作为参数传递的属性对象。

添加属性时调用的方法是attr。 Code Here

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

方法2
$("<a/>", {href: link});
此处，jQuery尝试在创建DOM元素时添加属性。现在，它接收context，这是要添加到元素的属性。遍历此属性映射here并分别为其调用attr()方法（可以在here中看到）。这等效于$("<a>").attr(key, val).attr(key1, val1).attr(key2, val2);因此，init被调用一次，但是在内部attr被多次调用。

方法3
$("<a href=" + link + ">");
此处jQuery再次不接收任何context参数。它仅接收必须解析的纯HTML字符串。在根据文档的情况下，如果HTML比单个结束标记复杂，则jQuery使用buildFragment方法（code here）构建DOM节点，并使用innerHTML方法插入您传递的HTML将其插入文档中。这发生在内部调用parseHTML的jQuery的buildFragment function中。因此，只有init被调用一次，内部必须构建该节点。没有呼叫attr。

可读性
因此，方法2实际上将对attr的调用包装在同一DOM元素创建调用中，并提供了更具可读性的形式。但是，IMHO方法1具有与方法2相同的可读性，并且应比方法2更快。在方法3中（如性能测试稍后将指出的那样），构建DOM节点会花费大量时间，因为所有内容都必须经过buildFragment方法1和方法2并非如此，在此阶段，传递单个标记html并立即使用document.createElement。

性能
对于单个元素创建，您几乎不会注意到执行时间的任何差异。总是需要不到几毫秒的时间。我为100,000个元素创建了此测试，以查看是否存在任何差异。注释掉要测试以获取执行时间的方法。

方法1：时间：400-600ms（最快）
方法2：花费的时间：550-700ms
方法3：花费时间：2700-2900ms（最慢预期）

时间可能会有所不同，但趋势将保持不变。该测试可在此处http://jsfiddle.net/6ko59joo/2/进行。尝试一下。

备选：无jQuery

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

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

供您考虑，它也包含在jsFiddle中。

这是基于我的理解和测试。如果我在某处有错误，我想纠正。

关于javascript - 使用attr()方法，将属性作为键值对象或直接传递时，哪种方法在jQuery中添加属性时执行最快？ ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31353654/

上一篇：javascript - AngularJS 按 ID 过滤

下一篇：javascript - 两个函数的区别

相关文章：

javascript - jQuery .on() 无法正常工作

javascript - 在生产中部署时运行 "bower install"是不好的做法吗？

javascript - 将常量或变量的值定义为常量或变量的名称，无需赋值

javascript - 计算每个表中有多少个第一列

jquery - 使用 Bootstrap 3 下拉菜单作为上下文菜单

.net - 使用 SQL Server CE 4.0 和 Entity Framework 4.2 进行批量插入的性能非常差

javascript - 如何避免加载 iframe 的源代码

javascript - 使用 jQuery 动态创建垂直分组的单选按钮

javascript - 为什么 Click 事件不适用于 iOS 上的 li 元素？

regex - 捕获正则表达式的更快方法

Answer 1

这实际上是一个有趣的问题。我在github上研究了jQuery的代码，建议您出于纯粹的学习目的而查看相同的here（以及文档here）

这是我的发现

一般来说
创建元素时（即编写$(".....")时）调用的方法是init。 Code here。它在内部使用parseHTML method。对于简单的单标签HTML，ParseHTML将仅使用document.createElement（here），而对于复杂的HTML，则将构建DOM节点。 init函数接受的两个参数是selector和context-selector是HTML字符串，而context是您在所指出的第二种方法中作为参数传递的属性对象。

添加属性时调用的方法是attr。 Code Here

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

方法2
$("<a/>", {href: link});
此处，jQuery尝试在创建DOM元素时添加属性。现在，它接收context，这是要添加到元素的属性。遍历此属性映射here并分别为其调用attr()方法（可以在here中看到）。这等效于$("<a>").attr(key, val).attr(key1, val1).attr(key2, val2);因此，init被调用一次，但是在内部attr被多次调用。

方法3
$("<a href=" + link + ">");
此处jQuery再次不接收任何context参数。它仅接收必须解析的纯HTML字符串。在根据文档的情况下，如果HTML比单个结束标记复杂，则jQuery使用buildFragment方法（code here）构建DOM节点，并使用innerHTML方法插入您传递的HTML将其插入文档中。这发生在内部调用parseHTML的jQuery的buildFragment function中。因此，只有init被调用一次，内部必须构建该节点。没有呼叫attr。

可读性
因此，方法2实际上将对attr的调用包装在同一DOM元素创建调用中，并提供了更具可读性的形式。但是，IMHO方法1具有与方法2相同的可读性，并且应比方法2更快。在方法3中（如性能测试稍后将指出的那样），构建DOM节点会花费大量时间，因为所有内容都必须经过buildFragment方法1和方法2并非如此，在此阶段，传递单个标记html并立即使用document.createElement。

性能
对于单个元素创建，您几乎不会注意到执行时间的任何差异。总是需要不到几毫秒的时间。我为100,000个元素创建了此测试，以查看是否存在任何差异。注释掉要测试以获取执行时间的方法。

方法1：时间：400-600ms（最快）
方法2：花费的时间：550-700ms
方法3：花费时间：2700-2900ms（最慢预期）

时间可能会有所不同，但趋势将保持不变。该测试可在此处http://jsfiddle.net/6ko59joo/2/进行。尝试一下。

备选：无jQuery

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

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

供您考虑，它也包含在jsFiddle中。

这是基于我的理解和测试。如果我在某处有错误，我想纠正。