InnerHTML leads to an increasing number of DOM Node.

Picture

related codes

<!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 = iPP;
    }, 10);
</script>
</body>
</html>

description

encountered a problem with the page crash. The window.performance that printed the Chrome before the page creah found that all the used js stack memory (sedJSHeapSize) did not exceed the current js stack memory size (totalJSHeapSize). Now I wonder if the number of page DOM exceeds the threshold, which causes the page crash, to find that the reason for the rising DOM Nodes in the page is that although the use of innerHTML, is finally garbage collected, will the number of DOM exceed the threshold due to an unsuccessful garbage collection.

question

question 1: the increase in: DOM Nodes is mainly due to the fact that DOM has not been recycled, mainly reference , but why does innerHTML lead to the increase of DOM nodes?
question 2: how to print DOM Nodes (, including unrecycled ones, like printing window.performance? document.getElementsByTagName ("*") .length can only print what is available on the page. I can print this number before the page crash to check whether the page crash is caused by the number of DOM exceeding the threshold