将对象状态保存在.data或attr性能与CSS之间？
在回应我关于旋转图像的昨天回答时，贾蒙德告诉我使用.data()而不是.attr()
一开始我认为他是对的，，但后来我想到了一个更大的背景，.使用.data()而不是.attr()总是更好吗？我查看了其他一些帖子，比如什么是更好的数据或攻击？或jquery-data-vs-data data。
对我来说答案并不令人满意..。
因此，我继续前进，并通过编辑了这个例子通过添加CSS.，我认为，如果每个图像旋转，那么在它上创建不同的样式可能是有用的。我的风格如下：
.rp[data-rotate="0"] {
border:10px solid #FF0000;
}
.rp[data-rotate="90"] {
border:10px solid #00FF00;
}
.rp[data-rotate="180"] {
border:10px solid #0000FF;
}
.rp[data-rotate="270"] {
border:10px solid #00FF00;
}因为设计和编码通常是分开的，所以在CSS中处理这个功能可能是一个很好的特性，而不是将这个功能添加到JavaScript中。在我的例子中，data-rotate就像一个特殊状态，映像当前有。因此，在我看来，在DOM中表示它是有意义的。
我还认为在这种情况下用.attr()保存比用.data()保存要好得多。在我读过的一篇文章中从来没有提到过。
，但后来我想到了性能。哪个函数是更快的？我建立了自己的测试如下：
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function runfirst(dobj,dname){
console.log("runfirst "+dname);
console.time(dname+"-attr");
for(i=0;i<10000;i++){
dobj.attr("data-test","a"+i);
}
console.timeEnd(dname+"-attr");
console.time(dname+"-data");
for(i=0;i<10000;i++){
dobj.data("data-test","a"+i);
}
console.timeEnd(dname+"-data");
}
function runlast(dobj,dname){
console.log("runlast "+dname);
console.time(dname+"-data");
for(i=0;i<10000;i++){
dobj.data("data-test","a"+i);
}
console.timeEnd(dname+"-data");
console.time(dname+"-attr");
for(i=0;i<10000;i++){
dobj.attr("data-test","a"+i);
}
console.timeEnd(dname+"-attr");
}
$().ready(function() {
runfirst($("#rp4"),"#rp4");
runfirst($("#rp3"),"#rp3");
runlast($("#rp2"),"#rp2");
runlast($("#rp1"),"#rp1");
});
</script>
</head>
<body>
<div id="rp1">Testdiv 1</div>
<div id="rp2" data-test="1">Testdiv 2</div>
<div id="rp3">Testdiv 3</div>
<div id="rp4" data-test="1">Testdiv 4</div>
</body>
</html>它还应该显示与预定义的data-test是否有区别。
结果之一是：
runfirst #rp4
#rp4-attr: 515ms
#rp4-data: 268ms
runfirst #rp3
#rp3-attr: 505ms
#rp3-data: 264ms
runlast #rp2
#rp2-data: 260ms
#rp2-attr: 521ms
runlast #rp1
#rp1-data: 284ms
#rp1-attr: 525ms因此，.attr()函数总是需要比.data()函数更多的时间。我想这是.data()的论点。因为表演总是一场争论！
然后，我想在这里张贴我的结果与一些问题，在写作过程中，我比较了问题堆栈溢出显示给我(类似的标题)。
没错，只有一个关于性能的有趣文章
我读了它并做了他们的例子。现在我很困惑！.data()这个测试显示比 .attr() 慢！为什么？
首先，我认为这是因为一个不同的jQuery库，所以我编辑了它和拯救了新的。但结果并没有改变。
所以现在我想问你：
- 为什么这两个例子在性能上有一些不同？
- 如果数据表示一种状态，您更愿意使用data- HTML5属性而不是数据吗？虽然在编码时不需要它？为什么-为什么不？
现在取决于表演：
- 如果性能显示
.attr()更好，那么性能会不会成为使用.attr()而不是数据的一个参数？虽然数据应该用于.data()
更新1:
我确实看到，没有开销，.data()要快得多。误解了数据:)但我对我的第二个问题更感兴趣。:)
如果数据表示一种状态，您更愿意使用data- HTML5属性而不是数据吗？虽然在编码时不需要它？为什么-为什么不呢？
使用.attr()而不是.data()还有其他的原因吗？例如互操作性？因为.data()是jquery，所以所有的人都可以读取.
更新2:
正如我们从T.J .克劳德's 速度试验 in 他的回答 attr中看到的，比data快得多！这再次让我感到困惑:)但是拜托！表演是一个争论，但不是最高的！所以请也回答我的其他问题！
更新3:
我的测试似乎是错误的，因为我在测试时使用了火虫！在chrome中的同一个文件列出的attr更快，在杰斯普夫上的第二个测试也显示attr更快。
回答 2
Stack Overflow用户
发布于 2015-01-20 16:54:23
考虑到.data()确实比.attr() 浏览器慢，但是在这个问题中速度差异并不重要，data()相对于attr()的一个优点是，如果数据匹配，数据将自动将data-属性强加给numbers或boolean值。
这意味着
<div id="boolean" data-t="true" data-f="false">将在运行以下操作时生成true & false的布尔运行时值：
console.log($('#boolean').data('t')); // reports true (not a string)
console.log($('#boolean').data('f')); // reports false (not a string)和
<div id="number" data-n="123.456">在运行以下代码时，将产生一个123.456的运行时值：
console.log($('#number').data('n')); // Reports 123.456 (not a string)另一方面，attr只处理字符串，但将值转换为字符串以进行保存。当你取值时，它不会强迫你的值。
attr和data之间的选择取决于特定示例所需的特性：
- 当我将
data-设置从服务器注入到页面中时，我倾向于使用data()来访问它们，这仅仅是因为它的代码更短。 - 如果我需要在DOM中显示数据，我将使用
attr()保存值。
Stack Overflow用户
发布于 2012-03-20 08:47:28
您可以使用jQuery.data。几乎总是最快的。jQuery试图在每个浏览器上优化其功能，并最大限度地提高可兼容性。因此，使用新版本的jQuery，您可以获得此函数的性能。这第二次测试给了我jQuery.data作为赢家。
https://stackoverflow.com/questions/9783598
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号