- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
本文浅析一下为什么 Map (和WeakMap)在处理大量DOM节点时特别有用.
我们在JavaScript中使用了很多普通的、古老的对象来存储键/值数据,它们处理的非常出色:
const person = {
firstName: 'Alex',
lastName: 'MacArthur',
isACommunist: false
};
但是,当你开始处理较大的实体,其属性经常被读取、更改和添加时,人们越来越多地使用 Map 来代替。这是有原因的:在某些情况下,Map跟对象相比有多种优势,特别是那些有敏感的性能问题或插入的顺序非常重要的情况.
但最近,我意识到我特别喜欢用它们来处理大量的DOM节点集合.
这个想法是在阅读Caleb Porzio 最近的一篇博文 时产生的。在这篇文章中,他正在处理一个假设的例子,即一个由10,000行组成的表,其中一条可以是"active"。为了管理不同行被选中的状态,一个对象被用于键/值存储。下面是他的一个迭代的注释版本.
import { ref, watchEffect } from 'vue';
let rowStates = {};
let activeRow;
document.querySelectorAll('tr').forEach((row) => {
// Set row state.
rowStates[row.id] = ref(false);
row.addEventListener('click', () => {
// Update row state.
if (activeRow) rowStates[activeRow].value = false;
activeRow = row.id;
rowStates[row.id].value = true;
});
watchEffect(() => {
// Read row state.
if (rowStates[row.id].value) {
row.classList.add('active');
} else {
row.classList.remove('active');
}
});
});
这能很好地完成工作。但是,它使用一个对象作为一个大型的类散列表,所以用于关联值的键必须是一个字符串,从而要求每个项目有一个唯一的ID(或其他字符串值)。这带来了一些额外的程序性开销,以便在需要时生成和读取这些值.
与之对应的是, Map 允许我们使用HTML节点作为自身的键。上面的代码片段最终会是这样:
import { ref, watchEffect } from 'vue';
- let rowStates = {};
+ let rowStates = new Map();
let activeRow;
document.querySelectorAll('tr').forEach((row) => {
- rowStates[row.id] = ref(false);
+ rowStates.set(row, ref(false));
row.addEventListener('click', () => {
- if (activeRow) rowStates[activeRow].value = false;
+ if (activeRow) rowStates.get(activeRow).value = false;
activeRow = row;
- rowStates[row.id].value = true;
+ rowStates.get(activeRow).value = true;
});
watchEffect(() => {
- if (rowStates[row.id].value) {
+ if (rowStates.get(row).value) {
row.classList.add('active');
} else {
row.classList.remove('active');
}
});
});
这里最明显的好处是,我不需要担心每一行都有唯一的ID。具有唯一性的节点本身就可以作为键。正因为如此,设置或读取任何属性都是不必要的。它更简单,也更有弹性.
在大多数情况下,这种差别是可以忽略不计的。但是,当你处理更大的数据集时,操作的性能就会明显提高。这甚至体现在规范中-- Map 的构建方式必须能够在项目数量不断增加时保持性能:
Map 必须使用哈希表或其他机制来实现,平均来说,这些机制提供的访问时间是集合中元素数量的亚线性.
"亚线性"只是意味着性能不会以与 Map 大小成比例的速度下降。因此,即使是大的Map也应该保持相当快的速度.
但即使在此基础上,也不需要搞乱DOM属性或通过一个类似字符串的ID进行查找。每个键本身就是一个引用,这意味着我们可以跳过一两个步骤.
我做了一些基本的性能测试来确认这一切。首先,按照Caleb的方案,我在一个页面上生成了10,000个 <tr> 元素:
const table = document.createElement('table');
document.body.append(table);
const count = 10_000;
for (let i = 0; i < count; i++) {
const item = document.createElement('tr');
item.id = i;
item.textContent = 'item';
table.append(item);
}
接下来,我建立了一个模板,用于测量循环所有这些行并将一些相关的状态存储在一个对象或 Map 中需要多长时间。我还在 for 循环中多次运行同一过程,然后确定写入和读取的平均时间.
const rows = document.querySelectorAll('tr');
const times = [];
const testMap = new Map();
const testObj = {};
for (let i = 0; i < 1000; i++) {
const start = performance.now();
rows.forEach((row, index) => {
// 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);
下面是测试结果:
100行 | 10000行 | 100000行 | |
---|---|---|---|
Object | 0.023ms | 3.45ms | 89.9ms |
Map | 0.019ms | 2.1ms | 48.7ms |
17% | 39% | 46% |
请记住,这些结果在稍有不同的情况下可能会有相当大的差异,但总的来说,它们总体上符合我的期望。当处理相对较少的项目时, Map 和对象之间的性能是相当的。但随着项目数量的增加, Map 开始拉开距离。这种性能上的亚线性变化开始显现出来.
有一个特殊版本的 Map 接口被设计用来更好地管理内存-- WeakMap 。它通过持有对其键的"弱"引用来做到这一点,所以如果这些对象键中的任何一个不再有其他地方的引用与之绑定,它就有资格进行垃圾回收。因此,当不再需要该键时,整个条目就会自动从 WeakMap 中删除,从而清除更多的内存。这也适用于DOM节点.
为了解决这个问题,我们将使用 FinalizationRegistry ,每当你所监听的引用被垃圾回收时,它就会 触发一个回调 (我从未想到会发现这样的好东西)。我们将从几个列表项开始:
<ul>
<li id="item1">first</li>
<li id="item2">second</li>
<li id="item3">third</li>
</ul>
接下来,我们将把这些项放在 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 < 100; i++) {
objs.push(...new Array(100));
}
await new Promise((resolve) => setTimeout(resolve, 10));
}
})();
在任何事情发生之前, WeakMap 持有三个项,正如预期的那样。但在第二个项从DOM中被移除并发生垃圾回收后,它看起来有点不同:
由于节点引用不再存在于DOM中,整个条目都被从 WeakMap 中删除,释放了一点内存。这是一个我很欣赏的功能,有助于保持环境的内存更加整洁.
我喜欢为DOM节点使用 Map ,因为:
Map
(被设计成)更具有性能。 WeakMap
意味着如果一个节点从DOM中被移除,条目将被自动垃圾回收。 以上就是本文的全部内容,如果对你有所帮助,欢迎点赞、收藏、转发~ 。
最后此篇关于如何使用Map处理Dom节点的文章就讲到这里了,如果你想了解更多关于如何使用Map处理Dom节点的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
Polymer的light DOM和local DOM有什么区别?来自文档(1): The DOM that an element creates and manages is called its
当内容添加到网页时,我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。 我想使用 DOM 突变事件,但它们并非在所有浏览器中都可用。是否有为
我刚遇到一个有趣的情况,我有一个提交 放置在 内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...
假设有一个滚动列表,当我插入一些新的 DOM 附加到当前 dom 时,它工作正常。上拉 但是如果我之前插入一些新的 DOM,新的 DOM 将在视口(viewport)中,而旧的 DOM 将被下推。下拉
在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快? 最佳答案 它们是不同用途的不同事物,因此比较性能没有意义。 虚拟 DOM 虚拟 DOM 旨在避免对
在我的页面内容上,我将多张卡片组织成网格 __________________ | ____ ____ | | | | | | | | | | | |
是否可以在浏览器中看到(调试)从 DOM 元素触发的自定义事件? 假设我想查看 Bootstrap Collapse 的哪个特定元素触发了 show.bs.collapse event ,我能以某种方
我正在生成用于客户端的 XPaths 服务器端,我很困惑为什么在 DOM 中找不到表路径(即 td 中的内容)。 事实证明,现代浏览器(至少是 Chrome 和 Firefox)插入了 tbody在文
是否可以检索文本节点的几何位置(即从父元素、页面等的顶部/左侧偏移量)? 最佳答案 不是直接的。 TextNode 没有用于测量视口(viewport)定位的原始 IE 偏移*(和类似的)扩展。 仅在
以下语句中的 DOM 元素的含义是什么? Statement #1 You can add multiple classes to a single DOM element. Statement #2
有没有办法让 firebug(或任何其他浏览器,或使用任何其他工具)阻止任何 dom 操作的发生?有时布局调试充满悬停事件的屏幕是不可能的,因为元素可能会消失,并且您看不到它们的复合布局。 最佳答案
我需要在html文档中搜索 text here 然后输出完整的节点路径(CSS或XPATH) 例如 html > body > div class ="something" > table > tr
这是我的一个页面的典型加载时间如何拆分为:- Domain Lookup 0 0 % Connect 134 .3% Request
我的 .on() 工作时遇到一些问题。我的网站是here . 如果你看看 www.eliteweb-creation.co.uk/dev/js/nav.js,我正在 mouseenter 和 mous
我是 Javascript 的新手,负责将我们产品的 UI 从 YUI2 迁移到 YUI3。看起来哪里都没有迁移指南,所以我现在正在浏览互联网帖子和 yui 文档。 在我的全局范围内,我临时添加了类似
我想和实习生一起测试一些 DOM 相关的东西,不需要特定的固定装置,只是一般的 DOM 东西,比如我改变了 Element.prototype。这是否需要通过本地 Selenium 服务器(或 sau
我是 HTML 和 HTML5 的初学者。 当我阅读以下内容时 link ,我找到了术语 DOM 和 DOM API。我通读了维基百科,但无法理解其背后的全部思想。 谁能给我解释一下: 文档对象模型
我有两个主要问题。 Object 之类的扩展是否算数? 什么是 DOM 包装? http://perfectionkills.com/whats-wrong-with-extending-the-do
对不起查询,原型(prototype),雅虎 YUI,道场在考虑小的时候不吸引我。我想要一个模块化的库,代码尽可能小,最多 20Kb [un compressed] 是我所期望的。应该提供 Dom 操
我是一名优秀的程序员,十分优秀!