innerHTML 导致 DOM Node 不断增加。

图片相关代码<!DOCTYPE html><html><head> <title>test</title></head><body><div id="test"></div><script> var oTest = document.getElementById('test'); var i = 0; setInterval(function() { oTest.innerHTML = i++; }, 10);</script></body></html>描述遇到一个页面 crash 的问题，在页面 creah 之前打印了 Chrome 的 window.performance 发现所有被使用的 js 堆栈内存(sedJSHeapSize)并没有超过当前 js 堆栈内存总大小(totalJSHeapSize)。现在怀疑是不是页面 DOM 数超过阈值导致页面 crash，发现页面中导致 DOM Nodes 不断上升的原因是使用了 innerHTML，虽然最后都被垃圾回收了，会不会因为某一次不成功的垃圾回收导致 DOM 数超过阈值。问题问题一: DOM Nodes 增加的原因主要是由于DOM未被回收，主要参考，但是 innerHTML 为什么会导致 DOM 节点的增加？问题二: 如何像打印window.performance那样打印出 DOM Nodes(包括未回收的)，document.getElementsByTagName("*").length只能打印出页面上现有的，我可以在页面crash前打印出该数排查页面 crash是不是由于 DOM 数超过阈值引起的

查看完整描述

1 回答

一只萌萌小番薯

TA贡献1795条经验获得超7个赞

题主你好。

问题一：针对题主给定的代码，用chrome performance分析，不存在内存泄露的问题。而在题主给出的图中，我看到了内存即使回收后仍呈现一个上升的趋势，请题主将观测时间变长后再反馈结果。也请题主关注：该问题是否是因为浏览器插件引起的（而不是前端代码）？

另：题主问到innerHTML为什么会导致DOM节点的增加。这是DOM NODE类型：，代码源源不断地创造着DOM NODE，自然会上升（但因为没有额外的引用，按照逻辑会被gc收回，不存在内存泄露）

问题二：参考谷歌的文档

反对回复 2019-04-09

热搜

最近搜索清空

innerHTML 导致 DOM Node 不断增加。

innerHTML 导致 DOM Node 不断增加。

1 回答

添加回答