javascript - $(e).attr(name,value) vs e.setAttribute(name,value) 有什么好处？

Question

案例:e 是 HtmlElement 类型而不是 css 选择器

我说的是任何属性，而不仅仅是标准允许的属性，比如 atom-type 或 data-atom-type，无论名称是什么，它都能工作吗没有 jQuery？

我怀疑 $(e).attr(name,value) 太慢了，首先它创建了一个完整的 jQuery 对象 ($( e) !== $(e)//两个对象不相同) (jsPerf: http://jsperf.com/jquery-attr-vs-native-setattribute/28 ) 然后它调用某些检查然后设置值，大多数浏览器很容易支持 e.setAttribute 。

将 $(e).attr(name,value) 替换为 e.setAttribute(name,value) 是否有任何问题？

根据 MSDN 文档，IE8 支持 setAttribute。有没有手机浏览器或者不支持的浏览器？

最终我想提高我的 JavaScript 框架的性能，最初我们广泛使用 jQuery 是因为它具有跨浏览器 DOM 功能。

我们现在了解到，除非您使用 css 选择器，否则当您使用HtmlElement 的实例。

Answer 1

I suspect $(e).attr(name,value) is too slow, first of all it is creating an entire jQuery object and then it invokes certain checks and then sets value, which most browsers easily support e.setAttribute.

如果你measure it ，您会发现性能差异相对而言很大，但绝对值微小，而且这是我们通常关心的绝对值。在 99.999999% 的情况下，这并不重要。如果您遇到特定性能问题，并追溯到使用 jQuery，然后考虑在那个时候进行优化。

what is benefit of $(e).attr(name,value) vs e.setAttribute(name,value)?

在您提到的特定情况下，e 是一个 HTMLElement，只有几个好处:

• setAttribute 中有几个 IE 特定的错误，jQuery 可以为您解决

• 人们在真正应该设置属性时设置了一些“属性”，例如checked 或disabled； jQuery 映射这些(这在当今主要是遗留功能，因为人们应该使用 prop)

• 它会为您对 bool 值进行一些预处理，让您在 true 时使用 $(e).attr("checked", true)真的应该“checked”

IE8 supports setAttribute as per MSDN documentation. Is there any mobile browser or any browser which will not support it?

所有浏览器都支持setAttribute。正如我之前提到的，各种版本的 IE 都存在各种错误，但它存在并且大部分都能正常工作。