頁面崩潰了！記錄一次測試中出現(xiàn)的前端內(nèi)存溢出現(xiàn)象

前情回顧

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

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

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

劇情延續(xù)

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

1.排除后端接口故障

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

2.前端異常摸排

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

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

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

圖1 瀏覽器內(nèi)存調(diào)試窗口示意圖

那么，如何進一步分析內(nèi)存溢出點呢？

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

圖2 瀏覽器內(nèi)存快照示意圖

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

圖3 瀏覽器內(nèi)存快照詳情

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

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

大結(jié)局

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

彩蛋

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

問：什么是內(nèi)存泄漏？什么是內(nèi)存溢出？

答：這兩個詞語經(jīng)常從開發(fā)同事嘴里聽到。

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

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

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

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

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

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

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

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