用 JavaScript 檢測 CPU 占比和記憶體洩露

作者：玉伯

最近在項目中碰到 ie6-7 下的記憶體洩露，通過 drip 能探測出來，問題也解決了。最近小組成員同時有在做前端品質工具，通過性能檢測，可以排查出一些耗時較長的代碼，但對記憶體洩露想不到好的自動化探測方式。本着集思廣益的初衷，發了條微網誌：

通過 settimeout 等方式，可以檢測目前頁面所在作業系統 cpu 的大體情況。請教萬能的微網誌：有沒有什麼辦法，通過 javascript 檢測到目前頁面所在作業系統的記憶體使用情況（比如是否持續上漲、存在記憶體洩露）？

cpu 占比探測

通過 settimeout 的方式探測 cpu 已經不是秘密，去年騰訊的朋友在 velocity 上分享過，北京有朋友還通過這個原理，幾年前就實作了網頁遊戲中動畫等耗時操作的自動調節。原理很簡單：

就是每隔 50ms 打一下點。理想情況下，data 的值應該是

但實際情況，data 會是

當 cpu 比較忙時，data 的資料變成

即 cpu 越忙，data 資料項會越大。這樣，記錄一系列 data 值，就可以繪制出 cpu 占比趨勢圖，和通過任務管理器看到的 cpu 趨勢圖非常接近。

上面隻是原理說明，實際情況沒這麼簡單。但很明顯，通過這麼一個簡單的規律，就能實作用純 javascript 來探測 cpu 占比了。

記憶體洩露探測

回到那條微網誌，是否也存在某種規律，使得可以用 javascript 來間接探測到記憶體洩露情況？

從微網誌的回複裡還沒看到有價值的資訊。今天回家時，想到一種思路：

如果存在記憶體洩露，意味着浏覽器在 gc 時，沒有進行某些操作。

沒有進行某些操作，意味着會節省一些 cpu 時間。

cpu 耗時的變化，可以通過合理的打點探測出來。

似乎有點希望，回到家後，立刻寫了點代碼驗證。但發現幹擾因素太多，基線也很難确定。折騰了一個多小時，有些死結，很難突破。

于是停下來寫這篇文章，看看大家有沒有更好的思路。我們以為不可能的事情多了去，但不可能的事情往往存在可能，思路是無限的。

最後描述下我的具體需求：

有一個 a.html 頁面，裡面有 js 業務代碼，以及單元測試代碼。 通過前端測試系統，我們可以把 a.html 自動跑在各個浏覽器上，比如 ie6/7/8/9。 現在已經可以自動得到 a.html 在各個浏覽器下的單元測試結果，以及一些性能名額。 現在想進一步，想通過單元測試代碼，也能探測出目前頁面是否存在記憶體洩露。

頁面存在記憶體洩露時，典型的現象是，不斷重新整理目前頁面，記憶體占用不會歸位，而會一直往上漲。