鑽石舞台

上周，Facebook 母公司 Meta 宣布了開源 MemLab，一個用於在基於 Chromium 的瀏覽器上的 JavaScript 應用程序中查找內存泄漏的工具。Facebook 技術團隊指出：「應用程序的性能和功能正確性問題通常會被用戶立即留意到。然而內存泄漏卻不一樣，它不容易被立即察覺，但它每次都會吃掉一大塊內存，使得整個網絡會話的響應變得非常慢。」

為了幫助開發人員解決這個問題，Meta 構建了 MemLab，它可以自動進行內存泄漏檢測並更容易找到泄漏的根本原因。據公告稱，Meta 內部使用它成功地控制了不可持續的內存增長，並識別了產品和基礎設施中的內存泄漏和內存優化機會。目前，Meta 已經在 GitHub 上開源了 MemLab，「我們希望它能為 JavaScript 社區做出貢獻」。

2020 年，Facebook 技術團隊將 Facebook.com 重新設計為單頁應用程序（SPA），該應用程序的大部分渲染和導航使用客戶端 JavaScript。除此之外，Meta 其他大流行網絡應用程序也都使用了類似的架構來構建，包括 Instagram 和 Workplace。

公告表示，雖然這種架構使其能夠提供更快的用戶交互、更好的開發人員體驗，但內存泄漏的後果在單頁應用程序（SPA）中更為嚴重，因為用戶可能會在較長時間內持續與頁面交互，而 MemLab 就是專為這種場景設計的。

在許多情況下，JavaScript 可能會泄漏內存。比如，Facebook 工程師 Liang Gong 和 Glenn Conner 就在公告中談到，當你向 Chrome 控制台發送一個對象時，Chrome 會對其進行隱藏引用，以防止它被收集。另外，auth0 工程師 Sebastian Peyrott 也曾談到，其他可能出現泄漏或未綁定內存增長的情況則與意外使用全局變量、忘記計時器或回調以及 DOM 外引用有關。

雖然 Chrome 開發者工具提供了檢查 JavaScript 代碼的內存行為的基本手段，比如時間線視圖和配置文件視圖，但這並不直接，也不能自動化。相反，MemLab 則可以很容易地集成到 CI/CD 管道中，Gong 和 Conner 介紹道。

MemLab 的工作原理是通過預定義的測試場景運行 headless 瀏覽器並對 JavaScript heap snapshots 進行差異分析來發現內存泄漏。此過程工作過程如下：

導航到頁面並返回；

查找未釋放的對象；

顯示泄露追蹤結果。

據悉，MemLab 使用了一個名為「Puppeteer」的 Node.js 庫。它可以控制 Google Chrome 或其它基於 Chromium 內核打造的瀏覽器，且默認情況下以 headless 模式運行（方便命令行交互）。

MemLab 的另一特性，就是提供了 JavaScript 堆的圖形視圖、啟用了用於檢查堆快照的 API 。這意味着開發者能夠編寫開展內存斷言的測試，例如聲明某個對象將不再存在於內存中。

此外還有一個用於查找重複字符串實例的工具，在某個案例中，團隊發現字符串占用了 70% 的堆、且其中半數至少有一個重複的實例。包括 Chrome、Edge、Firefox 在內的瀏覽器，都有附帶內存檢查工具。但正如以為開發者在 Hacker News 上吐槽的那樣，這些開發工具難以在調試過程中揪出內存泄露的問題。

安裝方面，MemLab 不僅可以通過 npm 包管理器、還可從 git 存儲庫進行構建。不過 Windows 平台必須使用 Git Bash，否則會在構建時遭遇失敗。然後開發者可以運行 MemLab，將其傳遞給 JavaScript 文件中定義的場景。

最後，MemLab 的另一項強大功能，就是可以在測試期間作為命令過程的一部分而運行。這意味着如果代碼中引入了嚴重的泄露，開發者們也能夠在投入生產環境前加以捕獲。

目前，Facebook 應用 MemLab 已經幾年的時間了。公告也提到，在 2021 年上半年應用 MemLab 也將 Facebook.com 上的 OOM 崩潰減少了 50%。

參考鏈接：

https://engineering.fb.com/2022/09/12/open-source/memlab/

https://www.infoq.com/news/2022/09/memlab-javascript-memory-leaks/

https://www.cnbeta.com/articles/tech/1316541.htm