javascript - 寻求更快的$。 (':data(key)')

Question

我正在编写一个 jQuery 扩展，它使用

将数据添加到 DOM 元素

el.data('lalala', my_data);

然后使用该数据动态上传元素。

每次我从服务器获取新数据时，我都需要更新所有元素

el.data('lalala') != null;

为了获得所有需要的元素，我使用 James Padolsey 的扩展:

$(':data(lalala)').each(...);

一切都很好，直到我遇到需要运行该代码 50 次的情况 - 它非常慢!在我的包含 3640 个 DOM 元素的页面上执行大约需要 8 秒

var x, t = (new Date).getTime();
for (n=0; n < 50; n++) {
  jQuery(':data(lalala)').each(function() {
    x++;
  });
};
console.log(((new Date).getTime()-t)/1000);

因为我不需要 RegExp 作为 :data 选择器的参数，所以我尝试将其替换为

var x, t = (new Date).getTime();
for (n=0; n < 50; n++) {
  jQuery('*').each(function() {
    if ($(this).data('lalala'))
      x++;
  });
};
console.log(((new Date).getTime()-t)/1000);

此代码速度更快(5 秒)，但我想要更多。

问有没有更快的方法来获取所有带有这个数据键的元素？

事实上，我可以保留一个包含我需要的所有元素的数组，因为我在我的模块中执行了 .data('key')。检查 100 个具有所需 .data('lalala') 的元素比检查 3640 更好:)

所以解决方案就像

for (i in elements) {
  el = elements[i];
  ....

但有时元素会从页面中移除(使用 jQuery .remove())。上面描述的两种解决方案 [$(':data(lalala)') 解决方案和 if ($(this).data('lalala'))] 都会跳过已删除的项目(正如我所需要的)，而数组的解决方案仍将指向已删除的元素(实际上，该元素不会真正被删除——它只会从 DOM 树中删除——因为我的数组仍然有一个引用)。

我发现 .remove() 也会从节点中删除数据，所以我的解决方案将变为

var toRemove = [];

for (vari in elements) {
  var el = elements[i];
  if ($(el).data('lalala'))
    ....
  else
    toRemove.push(i);
};

for (var ii in toRemove)
  elements.splice(toRemove[ii], 1); // remove element from array

这个解决方案快了 100 倍!

问 当 DOM 元素从数组中删除时，垃圾收集器会释放内存吗？

请记住，元素已被 DOM 树引用，我们在数组中创建了一个新引用，然后使用 .remove() 删除，然后从数组中删除。

有更好的方法吗？

Answer 1

Are there any faster way to get all elements with this data key?

当然!，直接遍历数据存储而不是通过元素，例如，如果你想要一个计数:

var x=0;
for(var key in $.cache) { 
  if(typeof $.cache[key]["lalala"] != "undefined") x++; 
}

这几乎是即时的，因为元素只有在 $.cache 中有一个条目，如果它们有数据和/或事件，并且没有 DOM 遍历发生。

对于另一部分，是的，这将跳过已删除的元素，因为它们的缓存也会被清理，前提是您不直接通过 .innerHTML 删除它们。