頁面崩潰了！記錄一次測試中出現的前端記憶體溢位現象

前情回顧

前幾天在一次web應用測試過程中，前端發起了向後端介面的查詢請求，由於後端響應較慢，前端一直處於等待響應返回狀態。在幾分鐘後，突然頁面出現讓人驚悚的“噢噢，頁面崩潰了”幾個大字。 加我VX：atstudy-js 回覆“測試”，進入 自動化測試學習交流群~~

看到這幾個字的一瞬間，血壓突然飆升，腦袋裡嗡地一聲冒出一串問號：發生了什麼事？於是，抱著可能是“出現錯覺”幻想，再次在前端重複了操作步驟，結果不出所料依然“噢噢，頁面崩潰”。

畢竟，我是長著一顆“鋼筋鐵腦殼”，肯定得追根溯源，查詢下什麼原因。

劇情延續

已經確定，上述現象是一個“必現”的故障。我已經有了信心可以將這個現象提交成一個故障交給開發同事分析而不會被拒絕，但是本著“節省彼此溝通時間”和“好奇心理”，我決定進行初步排查。

1.排除後端介面故障

再次觸發故障，登入後端伺服器檢視介面接受請求和返回響應日誌，發現前端故障出現時，後端仍處於“等待響應返回”狀態。因此，不可能是因為後端返回資料太大等原因造成”頁面崩潰”，暫時排除後端故障！

2.前端異常摸排

排除後端故障後，轉戰前端故障摸排。由於不太熟悉前端日誌存放，所以選擇了常用的瀏覽器除錯模式進行排查，看看能不能得到想要的結果。

開啟瀏覽器除錯視窗，切換到“記憶體“選單（樣例如下圖所示）。再次重複操作步驟，觸發“頁面崩潰”故障。過程中突然注意到，記憶體除錯視窗的“JS堆總大小”快速增長，然後出現“頁面崩潰”。

重複幾次測試，都發現“JS堆總大小”快速增長。由此可以初步確定，前端記憶體溢位，導致頁面崩潰。

圖1 瀏覽器記憶體除錯視窗示意圖

那麼，如何進一步分析記憶體溢位點呢？

如下圖2所示，點選“拍攝快照”，瀏覽器會將當前頁面的記憶體和快取一起計算、快照下來。

圖2 瀏覽器記憶體快照示意圖

如下圖3所示，為“”頁面快照結果。從圖中可以看出前端js檔案中每個函式佔用的大小，以及每個物件的記憶體大小。

圖3 瀏覽器記憶體快照詳情

透過該方法，我快速找到了前端js檔案中記憶體消耗最大的函式和物件。收集好“故障表象圖（頁面崩潰截圖）”、“記憶體快照截圖”，將整個故障復現方法和故障現象和初步分析結果貼到故障描述中，提交給前端開發人員進一步分析。

很快，前端開發人員給予了肯定，的確是前端內部溢位，根本原因是閉包導致，且很快修復完成。 由此可以看出，使用瀏覽器的記憶體除錯視窗和記憶體快照幫助我取得了一次成功的前端故障初步分析結果，為開發人員提供了有效的幫助，且節省了大量的溝通時間。

大結局

從本文案例中可以看出，掌握瀏覽器除錯視窗的使用和分析是一個十分方便且有效的故障分析方法，可以提升我們測試人員的專業素養，為我們贏得開發同事的尊重，也可以提高研發效率，節省不必要的溝通成本。建議大家可以熟練使用和掌握。

彩蛋

有什麼想再說說的嗎？有一點點。

問：什麼是記憶體洩漏？什麼是記憶體溢位？

答：這兩個詞語經常從開發同事嘴裡聽到。

記憶體洩漏（Memory Leak）是指程式中已動態分配的堆記憶體由於某種原因程式未釋放或無法釋放，造成系統記憶體的浪費，導致程式執行速度減慢甚至系統崩潰等嚴重後果。

記憶體溢位(Out Of Memory，簡稱OOM)是指應用系統中存在無法回收的記憶體或使用的記憶體過多，最終使得程式執行要用到的記憶體大於能提供的最大記憶體。此時程式就執行不了，系統會提示記憶體溢位，有時候會自動關閉軟體，重啟電腦或者軟體後釋放掉一部分記憶體又可以正常執行該軟體，而由系統配置、資料流、使用者程式碼等原因而導致的記憶體溢位錯誤，即使使用者重新執行任務依然無法避免。

簡單來說，記憶體洩漏可以理解為程式某個未使用的變數或者方法，長期佔用記憶體不會釋放，導致記憶體堆積浪費；記憶體溢位可以理解為因為某些原因，程式使用的記憶體大於硬體提供的記憶體，導致記憶體超出了。

問：快照時間太短，頁面還在載入快照就結束了？

答：若想要分析更長時間的頁面記憶體變化或佔用，推薦使用瀏覽器除錯視窗的“效能”。

問：為何感覺相鄰幾次相同頁面的快照開始時，記憶體似乎依然很大？

答：快照會將記憶體和快取一起計算，快照前記得使用如下圖表清理頁面快取，這樣就可以獲得更準確的記憶體資料啦。

最後：

可以到我的個人V：atstudy-js，可以免費領取一份10G軟體測試工程師面試寶典文件資料。以及相對應的影片學習教程免費分享！其中包括了有基礎知識、Linux必備、Mysql資料庫、抓包工具、介面測試工具、測試進階-Python程式設計、Web自動化測試、APP自動化測試、介面自動化測試、測試高階持續整合、測試架構開發測試框架、效能測試等。

這些測試資料，對於做【軟體測試】的朋友來說應該是最全面最完整的備戰倉庫，這個倉庫也陪伴我走過了最艱難的路程，希望也能幫助到你！