資訊專欄INFORMATION COLUMN
摘要：查找原因因?yàn)楦铝说陌姹静懦霈F(xiàn)內(nèi)存泄漏的問題，所以有理由懷疑，就是新增加的功能導(dǎo)致的內(nèi)存泄漏。同時(shí)還發(fā)現(xiàn)了也有內(nèi)存泄漏的情況，通過同樣的方式定位到了這個(gè)問題并最終解決。
在最近給客戶交付的一個(gè)項(xiàng)目中，客戶反映系統(tǒng)跑一段時(shí)間就會(huì)奔潰掉。我的第一直覺就是可能發(fā)生了內(nèi)存泄漏。
復(fù)現(xiàn)bug為了能夠讓bug復(fù)現(xiàn)，我讓開發(fā)的小伙，先把模擬系統(tǒng)在本地跑起來。要知道，bug復(fù)現(xiàn)是很重要的。bug復(fù)現(xiàn)，能夠讓開發(fā)人員直觀的感受到bug發(fā)生的過程。另外如果bug不能復(fù)現(xiàn)，程序員的反應(yīng)可能是這樣的：
我的這邊是好的呀，沒有什么問題。
哎呀，是不是你的使用方法不對啊。
看到了嗎，如果bug不能復(fù)現(xiàn)，會(huì)直接極大的減少程序員想要修復(fù)bug的意愿的。
我后來問他，測試的怎么樣，他說沒有問題呀。我問題跑了多久，他說有一會(huì)兒吧，看沒問題就關(guān)閉了。
一般來說，內(nèi)存泄漏最終導(dǎo)致奔潰的需要挺長一段時(shí)間的，所以我告訴他一直跑，跑到奔潰為止。
后來第二天，他說果然奔潰了。
因?yàn)楦铝说陌姹静懦霈F(xiàn)內(nèi)存泄漏的問題，所以有理由懷疑，就是新增加的功能導(dǎo)致的內(nèi)存泄漏。 新加的功能是，在一個(gè)TWaver的表格中，部分單元格中使用echart 圖表來繪制。而由于代碼中每次刷新的都會(huì)調(diào)用echart.init方法重新創(chuàng)建。導(dǎo)致原來創(chuàng)建的echart實(shí)例中創(chuàng)建的一些變量不能釋放，所以這里懷疑，echart 如果反復(fù)刪除并創(chuàng)建會(huì)導(dǎo)致內(nèi)存泄漏。所以讓開發(fā)人員改成了緩存的方案。
當(dāng)然由于TWaver表格的內(nèi)部機(jī)制，會(huì)在重新繪制的時(shí)候，移除上一次單元格的內(nèi)容，并移除內(nèi)容所有父子關(guān)系。這個(gè)問題導(dǎo)致了，緩存方案失效。 最終的解決方案是重寫了這個(gè)移除方法，不解除移除內(nèi)容的父子關(guān)系。
到此為止，應(yīng)該問題是解決了。讓小伙伴改進(jìn)后，繼續(xù)把模擬系統(tǒng)一直跑起來。 很不幸的是，第二天仍然奔潰。由于此時(shí)并不能直觀的看出問題所在，所以需要使用一些技巧了。
可以確定的是，還是表格的問題導(dǎo)致的內(nèi)存泄漏，為了避免干擾，讓小伙伴把表格的核心內(nèi)容拉出來寫兩個(gè)一個(gè)demo。 這樣就可以專注于表格相關(guān)問題的定位了。
在解決一些大項(xiàng)目的問題的時(shí)候，如果發(fā)現(xiàn)一些難定位的問題，可以考慮把程序簡化，抽出有問題的代碼部分寫小的例子。方便問題的定位，排除不必要的干擾。使用chrome的工具分析
首先把小伙伴寫的小例子跑起來，然后打開chrome的控制臺(tái)。點(diǎn)擊memory標(biāo)簽：
選擇Allocation instrumentation on timeline，點(diǎn)擊start，開始錄制內(nèi)存的記錄情況，會(huì)發(fā)現(xiàn)有一些藍(lán)色的條，永遠(yuǎn)不會(huì)變暗，表示這部分內(nèi)存始終未被回收：
點(diǎn)擊其中的一個(gè)藍(lán)條，可以查看局部的內(nèi)存情況，如下圖所示：
從中可以看到有array，system和Detached HTMLSpanElement。 我們知道Detached HTMLSpanElement表示已經(jīng)脫離文檔樹的dom元素，它也是導(dǎo)致內(nèi)存泄漏的一個(gè)經(jīng)常的誘因，點(diǎn)擊Detached HTMLSpanElement，查看詳情：
可以看到"_stringPool"這樣的一個(gè)數(shù)組對象，里面放的就是Span元素，引用他的就是table，而且數(shù)量有372個(gè)之多，由于小例子使用的表格只有一行一列，這么大的數(shù)量，肯定是內(nèi)存泄漏導(dǎo)致，直接在瀏覽器打印這個(gè)pool，可以看出這個(gè)數(shù)量確實(shí)在一直增加（看index的情況）:
至此，查到了是那個(gè)地方發(fā)生了內(nèi)存泄漏。 根據(jù)這個(gè)線索，比較容易定位到程序的邏輯問題所在，并很快就解決了問題。
ps：同時(shí)還發(fā)現(xiàn)了table.__divPool也有內(nèi)存泄漏的情況，通過同樣的方式定位到了這個(gè)問題并最終解決。
問題出在小伙伴對于renderCell方法的重載和release方法的重載，這個(gè)涉及到TWaver的內(nèi)部邏輯，此處就不詳細(xì)說明了。
歡迎關(guān)注公眾號(hào)：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97966.html
摘要：開發(fā)教程步步為營，掌握基礎(chǔ)技能發(fā)布機(jī)器學(xué)習(xí)速成課程為了幫助更多的人了解與學(xué)習(xí)機(jī)器學(xué)習(xí)相關(guān)的知識(shí)技能，發(fā)布了人工智能學(xué)習(xí)網(wǎng)站。更多相關(guān)內(nèi)容參考數(shù)據(jù)科學(xué)與機(jī)器學(xué)習(xí)實(shí)戰(zhàn)手冊。 showImg(https://segmentfault.com/img/remote/1460000013586587); 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱...
摘要：內(nèi)存泄露內(nèi)存泄露概念在計(jì)算機(jī)科學(xué)中，內(nèi)存泄漏指由于疏忽或錯(cuò)誤造成程序未能釋放已經(jīng)不再使用的內(nèi)存。判斷內(nèi)存泄漏，以字段為準(zhǔn)。 本文是 重溫基礎(chǔ) 系列文章的第二十二篇。 今日感受：優(yōu)化學(xué)習(xí)方法。 系列目錄： 【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理) 【重溫基礎(chǔ)】1-14篇 【重溫基礎(chǔ)】15.JS對象介紹 【重溫基礎(chǔ)】16.JSON對象介紹 【重溫基礎(chǔ)】1...
摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...
摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...
閱讀 2675·2021-11-11 16:54
閱讀 3679·2021-08-16 10:46
閱讀 3454·2019-08-30 14:18
閱讀 3049·2019-08-30 14:01
閱讀 2733·2019-08-29 14:15
閱讀 2021·2019-08-29 11:31
閱讀 3096·2019-08-29 11:05
閱讀 2602·2019-08-26 11:54
