在回答我的answer yesterday約旋轉圖像，Jamund告訴我使用.data()代替.attr()在.data或attr中保存對象狀態 - 性能與CSS？
首先，我認爲他是對的，但後來我想到了一個更大的背景下 ...它總是更好使用.data()而不是.attr()？我看了一些其他職位一樣what-is-better-data-or-attr或jquery-data-vs-attrdata
的答案對我來說不理想......
所以我提出和通過edited the example加入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()的一個論據。因爲表演總是一個論點！
然後我想一些問題，在這裏發佈我的結果，並以書面的行爲我的問題堆棧溢出給我看（類似標題）
夠真相比，有一個interesting post about performance
我讀它並運行他們的例子。而現在我很困惑！ 這個測試表明.data()比.attr()要慢！？!!爲什麼？
首先我認爲這是因爲一個不同的jQuery庫，所以我編輯它和saved the new one。但結果並沒有改變......
所以現在我的問題給你：
- 爲何會出現在性能上在這兩個例子有哪些區別？
- 如果表示狀態，您更喜歡使用數據HTML5屬性而不是數據嗎？雖然在編碼時不需要它？爲什麼 - 爲什麼不呢？
現在取決於性能：
- 將表現爲你使用
.attr()而不是數據，如果它表明.attr()更好是爭論？儘管數據旨在用於.data()？
更新1：
我沒看到，沒有開銷.data()要快得多。誤解了數據:)但我對第二個問題更感興趣。 :)
如果 表示一個狀態，您更喜歡使用數據HTML5屬性而不是數據嗎？雖然編碼時不需要 編碼？爲什麼 - 爲什麼不呢？
是否還有其他某些原因可以使用.attr()而不是.data()？例如互操作性？因爲.data()是jQuery的風格和HTML屬性可以被所有讀取...
更新2：
正如我們在his answerattr從T.J Crowder的speed test看到的是更快然後data！這又讓我困惑:)但請！表演是一種說法，但不是最高的！所以也請回答我的其他問題！
更新3：
我的測試，似乎是因爲fire-bug我以前在測試時是假的！同一個文件在鉻列出attr更快，第二個測試jsperf也說attr更快
_「如果表明.attr（）更好，那麼使用.attr（）而不是數據的性能會成爲一個參數嗎？」_ **是...還有什麼可以作爲參數？ ** – gdoron 2012-03-20 08:47:35
其他可能是：更好的可調，更好的代碼，更好的可編輯性，更好的可理解性等... OOP編程的性能低於程序性能，但它往往更好:) – Neysor 2012-03-20 08:50:42
*「因爲性能總是一個參數！」*不在2012年。讓我們來看看你的'runfirst＃rp4'結果：'attr'的10k迭代需要515ms ;數據的10k次迭代需要268ms。這是51.5 usec（*微秒*，百萬分之一秒**）每個與每個26.8 usec。所以你想知道是否使用'data'，如果它可以節省你24.7的usec。人類感知的東西只有十分之幾秒。所以對於它來說，重要的是，你必須在一個緊密的循環中操作大約4000次，以便讓人們注意到它們之間的差異。這甚至不值得擔心，即使在鼠標移動處理程序中也是如此。 :-) – 2012-03-20 08:51:40