dataset vs .data - Разница?

Question

Я читаю некоторые значения в полях атрибутов данных. Я видел два простых способа, чтобы прочитать данные, как показано ниже:

var webappData = document.getElementById('web-app-data'), 
    rating = webappData.dataset.rating; 

ИЛИ

var effectData = $('.effects-list li'), 
    creative = effectData.filter('[data-creative]').data("creative"); 

Мой вопрос, какой из них имеет лучшую производительность или действительно ли они отличаются?

У меня есть страница со многими атрибутами данных, к которым я обращаюсь, и я хотел бы использовать метод, который имеет лучшую производительность.

Любое руководство по пониманию разницы между ними будет оценено по достоинству. Хотя я смотрю на производительность специально, если есть другие причины использовать один над другим, я тоже хотел бы знать об этом.

Answer 1

dataset является родным свойство элемента, который содержит атрибуты данных, это новый (МОГ) добавление и как таковой поддерживается только в IE11 +, Chrome 8+, FF и т.д. 6+

более креста решение браузера будет получить атрибут непосредственно

webappData.getAttribute('data-rating'); 

---

data() является методом JQuery, и другим, чем при использовании атрибута данных HTML5 для установки щёток значения, если он не существует внутри, она не имеет ничего общего с набором данных ,

data() хранит все данные, которые вы передаете его в качестве внутреннего объекта, созданного с помощью JQuery, так что это, например, не в состоянии будет

$(element).data('key', 'value'); 

element.dataset.key // undefined 

как данные не хранятся в атрибутах на всех, но внутренне JQuery.
JQuery эквивалент получения и установки атрибутов данных будет attr()

$(element).attr('data-key', 'value'); 

---

Родные методы, вероятно, быстрее, но так как они не являются действительно сопоставимы с JQuery-х data() это действительно не имеет значения, но для получения атрибута данных Я думаю, что самый быстрый метод с лучшей поддержкой браузера будет

var rating = webappData.getAttribute('data-rating');