642
用 JavaScript 檢測 CPU 占比和內存泄露
作者：玉伯
最近在項目中碰到 IE6-7 下的內存泄露，通過 Drip 能探測出來，問題也解決了。最近小組成員同時有在做前端質量工具，通過性能檢測，可以排查出一些耗時較長的代碼，但對內存泄露想不到好的自動化探測方式。本著集思廣益的初衷，發了條微博：
通過 setTimeout 等方式，可以檢測當前頁麵所在操作係統 CPU 的大體情況。請教萬能的微博：有沒有什麼辦法，通過 JavaScript 檢測到當前頁麵所在操作係統的內存使用情況（比如是否持續上漲、存在內存泄露）？
CPU 占比探測
通過 setTimeout 的方式探測 CPU 已經不是秘密，去年騰訊的朋友在 Velocity 上分享過，北京有朋友還通過這個原理，幾年前就實現了網頁遊戲中動畫等耗時操作的自動調節。原理很簡單：
var data = []
var t
function pulse() {
t && data.push(Date.now() - t)
t = Date.now()
setTimeout(pulse, 50)
}
pulse()
就是每隔 50ms 打一下點。理想情況下，data 的值應該是
data = [50, 50, 50, 50, ...]
但實際情況，data 會是
data = [51, 52, 50, 52, ...]
當 CPU 比較忙時，data 的數據變成
data = [81, 102, 90, 62, ...]
即 CPU 越忙，data 數據項會越大。這樣，記錄一係列 data 值，就可以繪製出 CPU 占比趨勢圖，和通過任務管理器看到的 CPU 趨勢圖非常接近。
上麵隻是原理說明，實際情況沒這麼簡單。但很明顯，通過這麼一個簡單的規律，就能實現用純 JavaScript 來探測 CPU 占比了。
內存泄露探測
回到那條微博，是否也存在某種規律，使得可以用 JavaScript 來間接探測到內存泄露情況？
從微博的回複裏還沒看到有價值的信息。今天回家時，想到一種思路：
- 如果存在內存泄露，意味著瀏覽器在 GC 時，沒有進行某些操作。
- 沒有進行某些操作，意味著會節省一些 CPU 時間。
- CPU 耗時的變化，可以通過合理的打點探測出來。
似乎有點希望，回到家後，立刻寫了點代碼驗證。但發現幹擾因素太多，基線也很難確定。折騰了一個多小時，有些死結，很難突破。
於是停下來寫這篇文章，看看大家有沒有更好的思路。我們以為不可能的事情多了去，但不可能的事情往往存在可能，思路是無限的。
最後描述下我的具體需求：
有一個 a.html 頁麵，裏麵有 JS 業務代碼，以及單元測試代碼。
通過前端測試係統，我們可以把 a.html 自動跑在各個瀏覽器上，比如 IE6/7/8/9。
現在已經可以自動得到 a.html 在各個瀏覽器下的單元測試結果，以及一些性能指標。
現在想進一步，想通過單元測試代碼，也能探測出當前頁麵是否存在內存泄露。
頁麵存在內存泄露時，典型的現象是，不斷刷新當前頁麵，內存占用不會歸位，而會一直往上漲。
最後更新：2017-04-03 07:57:03