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

前情回顧

前幾天在一次web應用測試過程中，前端發起了向后端接口的查詢請求，由于后端響應較慢，前端一直處于等待響應返回狀態。在幾分鐘后，突然頁面出現讓人驚悚的“噢噢，頁面崩潰了”幾個大字。

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

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

劇情延續

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

1.排除后端接口故障

再次觸發故障，登錄后端服務器查看接口接受請求和返回響應日志，發現前端故障出現時，后端仍處于“等待響應返回”狀態。因此，不可能是因為后端返回數據太大等原因造成”頁面崩潰”，暫時排除后端故障！

2.前端異常摸排

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

打開瀏覽器調試窗口，切換到“內存“菜單（樣例如下圖所示）。再次重復操作步驟，觸發“頁面崩潰”故障。過程中突然注意到，內存調試窗口的“JS堆總大小”快速增長，然后出現“頁面崩潰”。

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

圖1 瀏覽器內存調試窗口示意圖

那么，如何進一步分析內存溢出點呢？

如下圖2所示，點擊“拍攝快照”，瀏覽器會將當前頁面的內存和緩存一起計算、快照下來。

圖2 瀏覽器內存快照示意圖

如下圖3所示，為“www.baidu.com”頁面快照結果。從圖中可以看出前端js文件中每個函數占用的大小，以及每個對象的內存大小。

圖3 瀏覽器內存快照詳情

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

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

大結局

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

彩蛋

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

問：什么是內存泄漏？什么是內存溢出？

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

內存泄漏（Memory Leak）是指程序中已動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。

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

簡單來說，內存泄漏可以理解為程序某個未使用的變量或者方法，長期占用內存不會釋放，導致內存堆積浪費；內存溢出可以理解為因為某些原因，程序使用的內存大于硬件提供的內存，導致內存超出了。

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

答：若想要分析更長時間的頁面內存變化或占用，推薦使用瀏覽器調試窗口的“性能”。

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

答：快照會將內存和緩存一起計算，快照前記得使用如下圖表清理頁面緩存，這樣就可以獲得更準確的內存數據啦。

最后：在我的V ：atstudy-js，可以免費領取一份10G軟件測試工程師面試寶典文檔資料。以及相對應的視頻學習教程免費分享！其中包括了有基礎知識、Linux必備、Shell、互聯網程序原理、Mysql數據庫、抓包工具專題、接口測試工具、測試進階-Python編程、Web自動化測試、APP自動化測試、接口自動化測試、測試高級持續集成、測試架構開發測試框架、性能測試、安全測試等。