memory-management - Chrome 分配配置文件 : why memory consumption for handleEvent is so huge?

Question

首先可以看看 this post在 medium.com 上关于将 pojo 分配为事件监听器的能力。问题是这个对象应该有 handleEvent 方法，以便能够对某个事件使用react。 例如:

const handler = {handleEvent(e) {this[`on${e.type}`](e)}};

在 medium.com 上的上述帖子中，作者将我们发送至 benchmark ，它的创建正是为了证明这样一个事实，即 handleEvent 的使用基本上需要 O(1) 内存开销。 例如(不是实际的基准):

const handlersQueue = [];

const masterHandler = {
    handleEvent(e) {
        this[`on${e.type}`](e)
    },
    onclick: function() {++this.counter},
    counter: 0
};

for (let i = 0; i < 1e4; i++) {
    const newHandler = Object.create(masterHandler);
    document.body.addEventListener('click', newHandler);
    handlersQueue.push(newHandler);
}

document.body.dispatchEvent(new Event('click'));

在这种情况下，假设所有事件处理程序都将从原型(prototype) (masterHandler) 中借用 handleEvent 方法是合乎逻辑的。 作者创建了上述示例的更复杂形式(查看 DynamicHandler 类)，但总体思路保持不变。 相反，分配配置文件显示 handleEvent 函数(Chrome 版本 64.0.3282.186(官方构建)(64 位)、MacOS High Sierra 消耗了大量内存): 问题是:

• a) 为什么会这样？
• b) 对所有事件监听器使用 handleEvent 不应该花费 O(1)(基本上是 0 字节的 SelfSize(bytes))而不是 O(n)？
• c) 这是否表示 ChromeDevTools 或 V8 本身存在问题？

Answer 1

这里是 V8 开发人员。字符串连接，即原始基准测试中的 'on' + e.type，或基于模板文字的替代方案:

`on${e.type}`

导致(毫不奇怪？)在每次调用时创建一个字符串。 100,000 次调用的 3.3MB 是每次迭代 33 字节；字符串“onclick”在堆上需要 32 个字节，所以这解释了大部分内容。

虽然这不是特别有效，但这些字符串至少是短暂的，即垃圾收集器会迅速清除它们。除非您采用分配配置文件，否则您可能甚至不会注意到；另一方面，如果您最终要解决真正的内存消耗问题，那么出于这个原因，消除配置文件中的此类噪音可能是值得的。

如果您想节省开销，您可以简单地将“onclick”函数重命名为“click”(对于任何其他事件也类似)，这样您就根本不需要处理字符串。