事情是這樣的：大家都知道“內(nèi)存泄露”這回事吧。它有幾個(gè)常見(jiàn)的場(chǎng)景：
-
閉包使用不當(dāng)引起內(nèi)存泄漏
-
（未聲明的）全局變量
-
分離的DOM節(jié)點(diǎn)
-
（隨意的）控制臺(tái)的打印
-
遺忘的定時(shí)器
-
循環(huán)引用
內(nèi)存泄漏需要重視，它是如此嚴(yán)重甚至?xí)?dǎo)致頁(yè)面卡頓，影響用戶體驗(yàn)！
其中第 3 點(diǎn)引起了我的注意 —— 我當(dāng)然清楚地知道它說(shuō)的是比如：“假設(shè)你手動(dòng)移除了某個(gè)dom節(jié)點(diǎn)，本應(yīng)釋放該dom節(jié)點(diǎn)所占用的內(nèi)存，但卻因?yàn)槭韬鰧?dǎo)致某處代碼仍對(duì)該被移除節(jié)點(diǎn)有引用，最終導(dǎo)致該節(jié)點(diǎn)所占內(nèi)存無(wú)法被釋放”的情況
<div id="root"> <div class="child">我是子元素</div> <button>移除</button> </div> <script> let btn = document.querySelector('button') let child = document.querySelector('.child') let root = document.querySelector('#root') btn.addEventListener('click', function() { root.removeChild(child) }) </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
該代碼所做的操作就是點(diǎn)擊按鈕后移除.child的節(jié)點(diǎn)，雖然點(diǎn)擊后，該節(jié)點(diǎn)確實(shí)從dom被移除了，但全局變量child仍對(duì)該節(jié)點(diǎn)有引用，所以導(dǎo)致該節(jié)點(diǎn)的內(nèi)存一直無(wú)法被釋放。
解決辦法：我們可以將對(duì).child節(jié)點(diǎn)的引用移動(dòng)到click事件的回調(diào)函數(shù)中，那么當(dāng)移除節(jié)點(diǎn)并退出回調(diào)函數(shù)的執(zhí)行上文后就會(huì)自動(dòng)清除對(duì)該節(jié)點(diǎn)的引用，自然也就不會(huì)存在內(nèi)存泄漏的情況了。（這實(shí)際上是在事件中實(shí)時(shí)檢測(cè)該節(jié)點(diǎn)是否存在，如果不存在則瀏覽器必不會(huì)觸發(fā)remove函數(shù)的執(zhí)行）
<div id="root"> <div class="child">我是子元素</div> <button>移除</button> </div> <script> let btn = document.querySelector('button') btn.addEventListener('click', function() { let child = document.querySelector('.child') let root = document.querySelector('#root') root.removeChild(child) }) </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
這段代碼很完美么？不。因?yàn)樗诿看问录|發(fā)后都創(chuàng)建了對(duì)child和root節(jié)點(diǎn)的引用。消耗了內(nèi)存（你完全可以想象一些人會(huì)狂點(diǎn)按鈕的情況…）。
其實(shí)還有一種辦法：我們?cè)赾lick中去判斷當(dāng)前root節(jié)點(diǎn)中是否還存在child子節(jié)點(diǎn)，如果存在，則執(zhí)行remove函數(shù)，否則什么也不做！
這就引發(fā)了標(biāo)題中所說(shuō)的行為。
怎么判斷？
遍歷？不，太過(guò)麻煩！
不知怎的，我突然想到了 for...in 中的 in 操作符，它可以基于原型鏈遍歷對(duì)象！
我們來(lái)還原一下當(dāng)時(shí)的場(chǎng)景：打開(kāi)GitHub，隨便找一個(gè)父節(jié)點(diǎn)，并獲取它：
圖中畫(huà)紅框的就是我們要取的父元素，橘紅色框的就是要判斷是否存在的子元素。
let parent=document.querySelector('.position-relative'); let child=document.querySelector('.progress-pjax-loader');
這里注意，因?yàn)楂@取到的是DOM節(jié)點(diǎn)（類數(shù)組對(duì)象），所以我們?cè)诓僮髑耙欢ㄒ忍幚硪幌拢?br style="box-sizing:border-box;outline:0px;user-select:text !important;overflow-wrap:break-word;" />
let p_child=[...parent.children];
然后
console.log(child in p_child);
！！！
為什么呢？（此時(shí)筆者還沒(méi)有意識(shí)到事情的嚴(yán)重性）
我想，是不是哪里出了問(wèn)題，用es6的includes API驗(yàn)證一下：
console.log(p_child.includes(child));
沒(méi)錯(cuò)啊！
再用一般的數(shù)組驗(yàn)證一下：
？？？
此時(shí)，筆者才想起到MDN上查閱一番：
進(jìn)而我發(fā)現(xiàn)：in操作符單獨(dú)使用時(shí)它檢測(cè)的是左側(cè)的值（作為索引）對(duì)應(yīng)的值是否在右側(cè)的對(duì)象內(nèi)部（屬性 & 原型上）！
回到上面的代碼中，我們發(fā)現(xiàn)：
這驗(yàn)證了我們的結(jié)論。
很顯然，“子元素”并不等同于“存在于原型鏈上” —— 這又引出了一個(gè)知識(shí)點(diǎn)：attribute和property的區(qū)別！
所以經(jīng)過(guò)一番“折騰”，源代碼還是應(yīng)該直接這樣寫(xiě)：
<div id="root"> <div class="child">我是子元素</div> <button>移除</button> </div> <script> let btn = document.querySelector('button') let child = document.querySelector('.child') let root = document.querySelector('#root') let r_child = [...root.children] btn.addEventListener('click', function() { if(r_child.includes(child)){ root.removeChild(child) } }) </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
轉(zhuǎn)自：csdn論壇 作者：恪愚
藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
