在IE下監控頁面記憶體資源和dom節點(sIEve軟體使用簡介))

在IE下監控頁面記憶體資源和dom節點(sIEve軟體使用簡介)

下載：http://files.cnblogs.com/lsjwzh/sIEve-0.0.8.rar
先註明一下: 這篇文章只是講解 在IE下如何利用 sIEve(一個drip的加強版) 來發現 記憶體泄露和記憶體回收問題,

而不是講解關於 IE的記憶體管理和記憶體泄露原理的文章.

關於IE的記憶體管理和記憶體泄露的更多知識還麻煩大家自行google了.

sIEve 是 一個協助我們查看ie瀏覽器(他本身基於作業系統安裝的ie核心)記憶體的使用和記憶體泄露問題的.

它可以:

Java代碼

1. 1 列出當前頁面內所有dom節點的基本資料(html id style 等)  
2. 2 頁面內所有dom節點的進階資訊 (記憶體佔用,數量,節點的引用)  
3. 3 可以尋找出頁面中的孤立節點  
4. 4 可以尋找出頁面中的循環參考  
5. 5 可以尋找出頁面中產生記憶體泄露的節點  

1 列出當前頁面內所有dom節點的基本資料(html id style 等)2 頁面內所有dom節點的進階資訊 (記憶體佔用,數量,節點的引用)3 可以尋找出頁面中的孤立節點4 可以尋找出頁面中的循環參考5 可以尋找出頁面中產生記憶體泄露的節點

更詳細的協助文檔見:

http://home.orange.nl/jsrosman/sievehelp.htm

我下面只是簡單介紹一下

請大家先下載附件裡的 示範檔案 和 sIEve 軟體

運行後, 在上面的address欄內輸入 要測試的頁面地址 如 file:///D:/mydev/ie_mem/test_ie.html

出現:

(圖)

[img] http://fins.javaeye.com/upload/picture/pic/9572/3418653e-a0c3-3e50-95db-7f13c8774daa.jpg[/img]

下端是記憶體變化的曲線圖 右上方是各種功能按鈕

右下角是頁面內的資訊(很重要),該列表自動定時重新整理. 5列資訊依次是:

記憶體總體佔用量(單位kb)

和上次列表自動重新整理時相比,變化的量

當前的dom節點數目

產生記憶體泄露的節點數目

日誌資訊(節點發生異常時記錄一些資訊 不常用)

下面開始看一下他是如何使用的

1 ie下不好的移除節點的方式

點擊測試頁面的"_removeNode div_1"按鈕

大家可以看到 div被從頁面內移除, 但是看右面的資訊列表裡 "當前的dom節點數目"並沒用變化

點擊右上方的功能按鈕: show in use.

這時候大家可以在彈出的視窗內 看到 id=div_1 的節點 是孤立狀態 而沒有被回收 (還有兩個孤立節點 大家不用管)

(圖)

2 ie下更好的移除節點的方式

關掉彈出的視窗, 點擊 測試頁面的"removeElement div_2"按鈕, div_2被移除 而且"當前的dom節點數目"減少

查看show in use. 大家可以看到 div_2及其子節點已經被真的移除了.

上面兩個實驗示範了如何查看孤立節點,  同時說明了第二種移除節點的方法更有效.

3 迴圈

關掉彈出的視窗, 點擊 測試頁面的"createCycle div_3"按鈕,

然後點擊右上方的功能按鈕: scan now. (旁邊的那個自動檢查cycle選項有問題 我這裡選上後常常會報錯) 

然後再點show in use. 查看使用中的節點.

大家可以看到 div_3節點 形成了 Cycle ,同時看後面的outerHTML大致可以分析出迴圈的原因.

( style節點也會被當作 循環參考, 不知道是ie的問題還是這個軟體的問題 ,反正大家沒必要在意style)

(圖)

4 記憶體泄露

關掉彈出的視窗, 點擊 測試頁面的"createMemLeak div_4"按鈕.

之後頁面會自動重新整理. 大家可以在右邊列表裡看到 leaks的數量增加了

點擊 show leaks 就可以看到記憶體泄露的點在哪裡了

(圖)

最後補充一下,在彈出的視窗裡 還可以做查看節點的更多資訊 (雙擊節點)