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