鍍金池/ 問(wèn)答/HTML/ innerHTML 導(dǎo)致 DOM Node 不斷增加。

innerHTML 導(dǎo)致 DOM Node 不斷增加。

圖片

圖片描述

相關(guān)代碼
<!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>
描述

遇到一個(gè)頁(yè)面 crash 的問(wèn)題，在頁(yè)面 creah 之前打印了 Chrome 的 window.performance 發(fā)現(xiàn)所有被使用的 js 堆棧內(nèi)存(sedJSHeapSize)并沒(méi)有超過(guò)當(dāng)前 js 堆棧內(nèi)存總大小(totalJSHeapSize)。現(xiàn)在懷疑是不是頁(yè)面 DOM 數(shù)超過(guò)閾值導(dǎo)致頁(yè)面 crash，發(fā)現(xiàn)頁(yè)面中導(dǎo)致 DOM Nodes 不斷上升的原因是使用了 innerHTML，雖然最后都被垃圾回收了，會(huì)不會(huì)因?yàn)槟骋淮尾怀晒Φ睦厥諏?dǎo)致 DOM 數(shù)超過(guò)閾值。

問(wèn)題

問(wèn)題一: DOM Nodes 增加的原因主要是由于DOM未被回收，主要參考，但是 innerHTML 為什么會(huì)導(dǎo)致 DOM 節(jié)點(diǎn)的增加？
問(wèn)題二: 如何像打印window.performance那樣打印出 DOM Nodes(包括未回收的)，document.getElementsByTagName("*").length只能打印出頁(yè)面上現(xiàn)有的，我可以在頁(yè)面crash前打印出該數(shù)排查頁(yè)面 crash是不是由于 DOM 數(shù)超過(guò)閾值引起的

回答
編輯回答
萌面人

題主你好。

問(wèn)題一：針對(duì)題主給定的代碼，用chrome performance分析，不存在內(nèi)存泄露的問(wèn)題。而在題主給出的圖中，我看到了內(nèi)存即使回收后仍呈現(xiàn)一個(gè)上升的趨勢(shì)，請(qǐng)題主將觀測(cè)時(shí)間變長(zhǎng)后再反饋結(jié)果。也請(qǐng)題主關(guān)注：該問(wèn)題是否是因?yàn)?strong>瀏覽器插件引起的（而不是前端代碼）？

另：題主問(wèn)到innerHTML為什么會(huì)導(dǎo)致DOM節(jié)點(diǎn)的增加。這是DOM NODE類(lèi)型：，代碼源源不斷地創(chuàng)造著DOM NODE，自然會(huì)上升（但因?yàn)闆](méi)有額外的引用，按照邏輯會(huì)被gc收回，不存在內(nèi)存泄露）

問(wèn)題二： 參考谷歌的文檔

2017年2月22日 07:41