天天看點

javascript記憶體洩露工具使用

javascript記憶體洩露的問題一直以來都不受到大家的重視,原因是對使用者的影響沒有太實際的表現,或許近幾年記憶體發展迅速。腳本記憶體再洩露也不會有太大影響。

當然作為前端開發的同學們,就不能有這樣的僥幸心理。出現memory l

當然作為前端開發的同學們,就不能有這樣的僥幸心理。出現memory leaks很大程度上是因為程式的不成熟和編碼不太規範造成的。不過,這裡就不說如何出現問題的,對問題的出現有興趣可以參考以下位址:

Understanding and Solving Internet Explorer Leak Patterns

IE's memory-leak fix greatly exaggerated

Memory Leakage in Internet Explorer – revisited

 這裡主要說說,目前幾個檢查javascript記憶體洩露的工具使用方法:

首先我們用到的工具有三個 Drip/sIEve ,Javascript Leaks Detector, leak monitor。其中前兩個是用于檢查ie的,leak monitor 是用來檢查firefox的情況的。這裡重點說一下ie下的這兩個工具,由于firefox的GC機制比ie強壯,隻要ie的問題消除了,其他浏覽器基本上不會有什麼問題。

<b> 1.Drip/sIEve</b>

Drip和sIEve的作者應該是同一個人,連open souce上的項目都是在一起的。不過,平時我們主要使用sIEve就可以了,sIEve的功能比Drip強大一些 

javascript記憶體洩露工具使用

sIEve 界面很簡單,左側:内嵌了一個浏覽器控件,我可以通路任何網址,下方還有個記憶體檢查,這樣我們可以友善看出記憶體的升降情況以及dom使用數量曲線。

右側面闆,我們可以通過 Show in use 看到目前頁面使用的dom的情況,Show Leaks 可以看到記憶體洩露的dom。當然每次顯示洩露的情況必須是頁面重新整理後,看到上一個頁面的洩露情況。

同時通過右側的資料顔色,我們可以看到記憶體的升降和具體的數量級

javascript記憶體洩露工具使用

不過sIEve的工作原理是對所有dom進行了一次hack,然後自己判斷那些dom沒有被釋放掉,但是具體的情況比較難分析出來。而且跟蹤有問題的dom需要一定技巧,對于大型的應用程式,跟蹤難度大。

 不過用來檢測小子產品的記憶體使用情況還是一個不錯的選擇,特别是大項目子產品細分後,對每個子產品的單獨測試還是比較不錯的

 謝謝怿飛同學提示的下載下傳位址, Drip/sIEve下載下傳位址:

<a href="http://home.orange.nl/jsrosman/" target="_blank">http://home.orange.nl/jsrosman/</a>

<b>2. Javascript Leaks Detector</b>

這是來自微軟GPDE團隊的一個小工具,下面簡稱JLD

安裝後,我們可以在ie浏覽器的 檢視-&gt;浏覽器欄中找到

javascript記憶體洩露工具使用

 JLD強大之處在于能夠模拟IE6和IE7的GC情況,和真實的回收情況。這樣可以做一個比較。

javascript記憶體洩露工具使用

這裡通常能隻能反應IE6和IE7的理想情況,我們需要選擇下面Actual Leaks來反映目前浏覽器的真實情況。

javascript記憶體洩露工具使用

浏覽器重新整理後,我們就可以看到上次頁面的結果了,綠色代表沒有發現記憶體洩露,紅色代表發現了記憶體洩露,藍色是目前加載完成的頁面,當然還有黑色,是指正在加載的網頁

當我們展開一個有問題的頁面時,

javascript記憶體洩露工具使用

我們可以看到一個有問題分支Leaks.這裡列出了有問題的節點,同時還能幫我們列出出現問題的腳本在什麼地方。

這點非常友善我們定位出洩露的問題所在。不過要使用腳本調試,我們必須要打開ie的腳本調試功能

javascript記憶體洩露工具使用

在ie選項的進階中,我們去掉這兩個勾即可

3. Leak Monitor

這是firefox上唯一一個檢查記憶體洩露的工具,不過這裡舜子不太推薦使用。因為firefox的記憶體GC機制比IE強悍,不必作為重點考慮對象。隻要ie的問題能處理好,firefox上基本上也沒有什麼問題。而且有ie這兩個強悍的軟體幫忙基本上能解決大部分問題了。

var wumiiPermaLink = "http://blog.163.com/lanhy2000/blog/static/43678608201121472644851/"; //文章的永久連結,作為文章的唯一辨別 var wumiiTags = "洩露,sieve,記憶體,javascript,leaks"; //文章标簽,以英文逗号分隔,如:"标簽1,标簽2" var wumiiSitePrefix = "http://blog.163.com/lanhy2000/"; //部落格的首頁位址,作為部落格的唯一辨別 var wumiiParams = "&amp;num=5&amp;mode=3&amp;pf=blog163"; //num為預設顯示的相關文章數目,mode為預設的顯示模式(1為文字,2為圖檔,3為自動)