jQuery .data()与HTML5 data-XXX性能 [英] jQuery .data() vs HTML5 data-XXX performance

问题描述

我发现此测试 http://jsbin.com/ekofa/2 显示了HTML5 data-XXX比jQuery .data()快.我正在开始一个项目，该项目需要将大量小数据放在HTML元素上，而性能至关重要.我应该使用.data()还是HTML5 data-XXX?该测试是否相关且准确?

I found this test http://jsbin.com/ekofa/2 that shows that HTML5 data-XXX is faster then jQuery .data(). I am starting a project that require lots of small data pieces placed on HTML elements where performance is crucial. Should I use .data() or HTML5 data-XXX? Is that test relevant and accurate?

推荐答案

我想这取决于您来自哪里，但是对于存储简单属性，data-XXX会因为以下原因而更快 $.data() 和

It depends where you're coming from I suppose, but for storing simple properties, data-XXX will be faster just because of how $.data() and .data() work.

例如，当您执行此操作以获取数据时:

For example when you do this to get data:

var thing = $('#myelement').data('thing')

您实际上在做什么:

var thing = $.cache[$('#myelement')[0][$.expando]]['thing'];

这比直接获取属性要长，如下所示:

This is longer than fetching an attribute directly, like this:

$('#myelement').attr('thing')

因此，对于数据，您实际上是获得$.expando属性 just 以获得ID then 进入$.cache以获得对象，此额外步骤意味着将会持续变慢.

So with data you're actually getting the $.expando attribute just to get the ID then going to $.cache to get the object, this extra step means it will be consistently slower.

然后再说一次，data-xxx属性并不是要存储事件处理程序或您正在积极操作的其他非常复杂的对象...因此它们在应用程序中不是1:1，因此直接比较可能不会平心而论.尽管它们在许多情况下用于相同的事情，但它们也具有不同的应用程序，这两种应用程序并不通用...因此在选择要使用的内容时要牢记这一点.这通常适用于任何两种主要是通用技术IMO.

Then again, data-xxx attributes weren't meant for storing event handlers or other really complex objects that you're actively manipulating...so they aren't a 1:1 in their application so a direct comparison may not be fair. Though they're used for the same things in many cases, they also have different applications that aren't common to both...so keep that in mind when picking what to use. This is usually true of any 2 mostly common technologies IMO.

这篇关于jQuery .data()与HTML5 data-XXX性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！