前情回顧

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

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

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

劇情延續(xù)

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

1.排除后端接口故障

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

2.前端異常摸排

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

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

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

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

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

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

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

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

大結(jié)局

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

彩蛋

有什么想再說說的嗎？有一點(diǎn)點(diǎn)。

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

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

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

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

簡(jiǎn)單來說，內(nèi)存泄漏可以理解為程序某個(gè)未使用的變量或者方法，長(zhǎng)期占用內(nèi)存不會(huì)釋放，導(dǎo)致內(nèi)存堆積浪費(fèi)；內(nèi)存溢出可以理解為因?yàn)槟承┰?，程序使用的?nèi)存大于硬件提供的內(nèi)存，導(dǎo)致內(nèi)存超出了。

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

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

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

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

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