如何使用Map处理Dom节点

const table = document.createElement('table');
document.body.append(table);

const count = 10_000;
for (let i = 0; i 

接下来，我建立了一个模板，用于测量循环所有这些行并将一些相关的状态存储在一个对象或Map中需要多长时间。我还在for循环中多次运行同一过程，然后确定写入和读取的平均时间。

const rows = document.querySelectorAll('tr');
const times = [];
const testMap = new Map();
const testObj = {};

for (let i = 0; i  {
    // Test Case #1  
	// testObj[row.id] = index;
	// const result = testObj[row.id];

	// Test Case #2
	// testMap.set(row, index);
	// const result = testMap.get(row);
  });

  times.push(performance.now() - start);
}

const average = times.reduce((acc, i) => acc + i, 0) / times.length;

console.log(average);

下面是测试结果：

请记住，这些结果在稍有不同的情况下可能会有相当大的差异，但总的来说，它们总体上符合我的期望。当处理相对较少的项目时，Map和对象之间的性能是相当的。但随着项目数量的增加，Map开始拉开距离。这种性能上的亚线性变化开始显现出来。

WeakMaps更有效地管理内存

有一个特殊版本的Map接口被设计用来更好地管理内存--WeakMap。它通过持有对其键的"弱"引用来做到这一点，所以如果这些对象键中的任何一个不再有其他地方的引用与之绑定，它就有资格进行垃圾回收。因此，当不再需要该键时，整个条目就会自动从WeakMap中删除，从而清除更多的内存。这也适用于DOM节点。

为了解决这个问题，我们将使用FinalizationRegistry，每当你所监听的引用被垃圾回收时，它就会触发一个回调（我从未想到会发现这样的好东西）。我们将从几个列表项开始：

  
first
  
second
  
third

接下来，我们将把这些项放在WeakMap中并注册item2，使其受到注册的监听。我们将删除它，只要它被垃圾回收，回调就会被触发，我们就能看到WeakMap的变化。

但是......垃圾收集是不可预测的，而且没有正式的方法来使它发生，所以为了让垃圾回收产生，我们将定期生成一堆对象并将它们持久化在内存中。下面是整个脚本代码：

(async () => {
    const listMap = new WeakMap();

    // Stick each item in a WeakMap.
    document.querySelectorAll('li').forEach((node) => {
	listMap.set(node, node.id);
    });

    const registry = new FinalizationRegistry((heldValue) => {
	// Garbage collection has happened!
	console.log('After collection:', heldValue);
    });

    registry.register(document.getElementById('item2'), listMap);
    
    console.log('Before collection:', listMap);

    // Remove node, freeing up reference!
    document.getElementById('item2').remove();

     // Periodically create a bunch o' objects to trigger collection.
     const objs = [];
     while (true) {
   	for (let i = 0; i  setTimeout(resolve, 10));
    }
})();

在任何事情发生之前，WeakMap持有三个项，正如预期的那样。但在第二个项从DOM中被移除并发生垃圾回收后，它看起来有点不同：

由于节点引用不再存在于DOM中，整个条目都被从WeakMap中删除，释放了一点内存。这是一个我很欣赏的功能，有助于保持环境的内存更加整洁。

太长不看版

我喜欢为DOM节点使用Map，因为：

• 节点本身可以作为键。我不需要先在每个节点上设置或读取独特的属性。
• 和具有大量成员的对象相比，Map（被设计成）更具有性能。
• 使用以节点为键的WeakMap意味着如果一个节点从DOM中被移除，条目将被自动垃圾回收。

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~

var cb_entryId = 17429597, cb_entryCreatedDate = '2023-05-24 21:29', cb_postType = 1, cb_postTitle = '如何使用Map处理Dom节点';
var allowComments = true, cb_blogId = 757394, cb_blogApp = 'chuckQu', cb_blogUserGuid = 'fed9a280-e5b3-40e2-0715-08da451c658a';
mermaidRender.render()
markdown_highlight()
zoomManager.apply("#cnblogs_post_body img:not(.code_img_closed):not(.code_img_opened)");
updatePostStats(
[cb_entryId],
function(id, count) { $("#post_view_count").text(count) },
function(id, count) { $("#post_comment_count").text(count) });

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
var kv = getGACustom();
if (kv) {
gtag('set', kv);
}
gtag('config', 'UA-476124-1');