Сохранить состояние объекта в .data или attr - производительность против CSS?
В ответ на мойответ вчера о вращении изображения,Jamund сказал мне, чтобы использовать.data() вместо.attr()
Сначала я подумал, что он прав,но потом я подумал о большем контексте... всегда лучше использовать.data() вместо.attr()? Я смотрел в некоторых других сообщениях, както, что-это-лучше-данных или-атр или жеJQuery-данных против-attrdata
Ответы не были удовлетворительными для меня ...
Так что я перешел иотредактировал пример подобавив 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 и атрибуты HTML могут быть прочитаны всеми ...
ОБНОВЛЕНИЕ 2:
Как мы видим изT.J Crowder«sтест скорости вего ответ attr гораздо быстрее, чемdata! что опять меня смущает :) Но, пожалуйста! Производительность - это аргумент, но не самый высокий! Так что дайте ответы и на мои другие вопросы, пожалуйста!
ОБНОВЛЕНИЕ 3:
Мой тест кажется ложным из-запротивопожарная ошибка Я использовал во время тестирования! Тот же файл в Chrome указанattr быстрее и второй тест наJSPerf также говоритattr быстрее