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 是包含数据属性的元素的原生属性,它是一个新的(ish)添加,因此仅在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');