欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

引言

在開(kāi)發(fā)綜合治理平臺(tái)態(tài)勢(shì)概覽的大屏頁(yè)面的過(guò)程，遇到了頁(yè)面崩潰的問(wèn)題，本帖子記錄了崩潰的原因分析和解決方案。

問(wèn)題

打開(kāi)綜合治理平臺(tái)，進(jìn)入態(tài)勢(shì)概覽頁(yè)面，停留在此頁(yè)面一段時(shí)間，會(huì)出現(xiàn)如下圖所示的頁(yè)面崩潰的情況。

原因分析

注：以下操作環(huán)境建議在瀏覽器隱身模式下進(jìn)行，防止其他因素干擾

使用工具

根據(jù)頁(yè)面崩潰的提示，可以初步判定是頁(yè)面內(nèi)存溢出導(dǎo)致的崩潰，為了驗(yàn)證內(nèi)存是否溢出，可以使用 瀏覽器自帶的工具分析驗(yàn)證。這里介紹三種工具的使用，可以結(jié)合實(shí)際需求來(lái)使用。

任務(wù)管理器1) 打開(kāi)方式：

2) 界面：

3）使用方式：任務(wù)管理器的使用方法最為簡(jiǎn)單，打開(kāi)需要分析的頁(yè)面，直接觀察內(nèi)存占用空間與 使用的內(nèi)存即可。如果這兩個(gè)數(shù)據(jù)持續(xù)上升，說(shuō)明內(nèi)存正在泄漏。

開(kāi)發(fā)者工具 面板1） 打開(kāi)方式：按 F12 打開(kāi)開(kāi)發(fā)者工具，選擇 欄2） 界面：

3） 使用方式：打開(kāi)需要分析的頁(yè)面，等頁(yè)面穩(wěn)定下來(lái)后，點(diǎn)擊 左上角的錄制按鈕開(kāi)始錄制，它會(huì)保存下頁(yè)面的快照、JS Heap、、Nodes、、GPU 等信息。錄制一段時(shí)間（最好在一分鐘以上）后，停止錄制，等待工具生成報(bào)告。

開(kāi)發(fā)者工具 面板1） 打開(kāi)方式：按 F12 打開(kāi)開(kāi)發(fā)者工具，選擇 欄2） 界面：

3） 使用方式：這個(gè)工具的使用方式最為復(fù)雜，這里只簡(jiǎn)單介紹下 Heap 的使用，感興趣的可以自行搜索其他使用方式。首先，打開(kāi)需要分析內(nèi)存的頁(yè)面，點(diǎn)擊工具左上方的錄制按鈕，生成分析報(bào)告。其次，進(jìn)行一些可能導(dǎo)致內(nèi)存上升的操作后，再次點(diǎn)擊錄制按鈕，生成分析報(bào)告。最后，我們有了兩份分析報(bào)告，通過(guò)菜單欄的下拉框選擇 過(guò)濾分析結(jié)果。觀察 #New、#、#Delta 這三列，分別代表新增對(duì)象數(shù)、刪除對(duì)象數(shù)、新增數(shù)與刪除數(shù)的差值，找到那些只有新增，沒(méi)有刪除的對(duì)象，看看是被誰(shuí)引用了瀏覽器崩潰是什么原因，據(jù)此來(lái)找到可能導(dǎo)致內(nèi)存溢出的代碼。

確定內(nèi)存溢出原因

打開(kāi)態(tài)勢(shì)概覽頁(yè)面后，通過(guò)任務(wù)管理器觀察頁(yè)面使用的內(nèi)存，發(fā)現(xiàn)內(nèi)存是持續(xù)上升的，這時(shí)再通過(guò) 工具進(jìn)一步分析。以下是 的分析結(jié)果：

通過(guò)分析結(jié)果可以看到，內(nèi)存資源在持續(xù)上升，再進(jìn)一步觀察結(jié)果，可以發(fā)現(xiàn)內(nèi)存上升是存在一個(gè)階梯式的上升周期的，為什么會(huì)產(chǎn)生這種現(xiàn)象呢？放大內(nèi)存上升的部分進(jìn)一步分析看看：

上圖顯示了內(nèi)存上升部分細(xì)節(jié)，把鼠標(biāo)移動(dòng)到頁(yè)面快照上，可以清楚地看到，當(dāng)上一個(gè)大屏頁(yè)面輪播到下一個(gè)頁(yè)面時(shí)，內(nèi)存就會(huì)上升并且不會(huì)再下降到之前的水平。現(xiàn)在已經(jīng)有理由懷疑是頁(yè)面輪播引起的內(nèi)存溢出，所以，通過(guò)暫停頁(yè)面輪播，再進(jìn)行一次 分析，看看分析結(jié)果：

通過(guò)上圖可以看到，暫停頁(yè)面輪播后，并沒(méi)有明顯的上升趨勢(shì)，說(shuō)明瀏覽器可以正常回收內(nèi)存，并沒(méi)有溢出。至此，已經(jīng)可以確定當(dāng)頁(yè)面輪播時(shí)內(nèi)存會(huì)溢出。

分析內(nèi)存溢出對(duì)象

經(jīng)過(guò)第二步的分析，已經(jīng)知道了大屏頁(yè)面切換會(huì)導(dǎo)致內(nèi)存升高，利用這個(gè)證據(jù)，用 工具去進(jìn)一步分析，找到那些被引用本該被釋放，但實(shí)際沒(méi)有的釋放的對(duì)象。首先，打開(kāi)態(tài)勢(shì)概覽頁(yè)面，先暫停頁(yè)面輪播切換，停留在總體態(tài)勢(shì)頁(yè)面，待頁(yè)面加載完成，然后打開(kāi) 工具，點(diǎn)擊錄制按鈕分析總體態(tài)勢(shì)頁(yè)面的內(nèi)存。分析完成后，手動(dòng)切換到風(fēng)險(xiǎn)態(tài)勢(shì)頁(yè)面或者其他大屏頁(yè)面，再切換回總體態(tài)勢(shì)頁(yè)面，然后在 工具中再次點(diǎn)擊錄制按鈕分析頁(yè)面切換之后的內(nèi)存。完成以上操作之后，就得到了兩份分析報(bào)告，分別是內(nèi)存上升前和上升后的，在 工具的菜單欄下拉框中選擇 ，看看到底是哪些家伙占用了內(nèi)存！

來(lái)分析上面的結(jié)果圖，首先，頁(yè)面上有各種類(lèi)型的對(duì)象，點(diǎn)擊對(duì)象可以看到對(duì)象具體的引用信息，我們的任務(wù)是通過(guò)對(duì)象引用信息找到一些蛛絲馬跡。我們可以搜索 開(kāi)頭歸類(lèi)的對(duì)象，也就是那些在內(nèi)存中但是沒(méi)有在頁(yè)面進(jìn)行渲染的元素。選擇一個(gè)，可以看到它的詳細(xì)引用信息：

很明顯， 引用了這個(gè)對(duì)象，而這個(gè)對(duì)象連同它的引用，理應(yīng)是在頁(yè)面切換之后被銷(xiāo)毀了的，既然他沒(méi)有銷(xiāo)毀瀏覽器崩潰是什么原因，說(shuō)明我們的代碼是有問(wèn)題的。接下來(lái)要做的是，找出 引用的對(duì)象沒(méi)有被銷(xiāo)毀的原因，修改相關(guān)代碼，再驗(yàn)證。

解決方案使用正確的 實(shí)例銷(xiāo)毀方法

根據(jù)上面的原因分析，我們知道是 引用的對(duì)象沒(méi)有正常被銷(xiāo)毀，那么很簡(jiǎn)單，我們只要嘗試正確銷(xiāo)毀 實(shí)例就好了。進(jìn)入到我們的 組件代碼，定位到 鉤子，可以看到，已經(jīng)有一段代碼對(duì) 實(shí)例進(jìn)行釋放了。

進(jìn)入 官網(wǎng)查詢(xún)銷(xiāo)毀實(shí)例的相關(guān) api，發(fā)現(xiàn).clear()方法只是清空了實(shí)例，并沒(méi)有銷(xiāo)毀，而.()方法才會(huì)銷(xiāo)毀實(shí)例。

答案到這里已經(jīng)呼之欲出了，我們項(xiàng)目中之前一直用的是.clear()方法清空 實(shí)例對(duì)象，而不是用.()銷(xiāo)毀，所以 實(shí)例并沒(méi)有被正常銷(xiāo)毀，當(dāng)我們頻繁地切換頁(yè)面的時(shí)候， 實(shí)例就會(huì)不斷的累加，占用的內(nèi)存也會(huì)隨之增加。所以，這里建議，以后我們封裝 組件的時(shí)候，統(tǒng)一使用.()方法銷(xiāo)毀組件。

頁(yè)面隱藏時(shí)停止定時(shí)器任務(wù)

你以為到這里就結(jié)束了嗎？事情沒(méi)有那么簡(jiǎn)單！在搜索內(nèi)存溢出解決方案的時(shí)候，在網(wǎng)上看到了一篇文章：//p/.html

再次通過(guò) 工具分析驗(yàn)證，結(jié)果如下：

果然，內(nèi)存又在持續(xù)增加，那么就使用網(wǎng)上分享的方法解決這個(gè)問(wèn)題，添加一個(gè)標(biāo)簽切換的監(jiān)聽(tīng)函數(shù)，在離開(kāi)頁(yè)面時(shí)，把頁(yè)面的定時(shí)器清除，回來(lái)頁(yè)面時(shí)重新開(kāi)啟定時(shí)器，這樣就可以了。

結(jié)果

保持在態(tài)勢(shì)概覽頁(yè)面，并開(kāi)啟輪播頁(yè)面，使用 工具進(jìn)行內(nèi)存分析結(jié)果：內(nèi)存保持在平穩(wěn)狀態(tài)，沒(méi)有上升，頁(yè)面沒(méi)有崩潰

進(jìn)入態(tài)勢(shì)概覽頁(yè)面，開(kāi)啟輪播頁(yè)面后，切換到其他標(biāo)簽頁(yè)或最小化瀏覽器結(jié)果：內(nèi)存保持在平穩(wěn)狀態(tài)，沒(méi)有上升，頁(yè)面沒(méi)有崩潰

保持在態(tài)勢(shì)概覽頁(yè)面，并開(kāi)啟輪播頁(yè)面，不做其他操作，掛機(jī)一天一夜。結(jié)果：內(nèi)存保持在 2G 左右，頁(yè)面沒(méi)有崩潰

總結(jié)

通過(guò)此次的內(nèi)存溢出分析，我們認(rèn)識(shí)了一些內(nèi)存分析工具及內(nèi)存分析方法，也發(fā)現(xiàn)了代碼中不足的地方，最后通過(guò)正確的方法解決了內(nèi)存溢出的問(wèn)題。希望這篇文章可以對(duì)大家日后的工作有所幫助。當(dāng)然，這只是很小一部分，也可能有不正確的地方，歡迎大家提出疑問(wèn)一起探討。

本文由博客群發(fā)一文多發(fā)等運(yùn)營(yíng)工具平臺(tái) 發(fā)布