快捷導(dǎo)航

vue關(guān)于接口請(qǐng)求數(shù)據(jù)過(guò)大導(dǎo)致瀏覽器崩潰的問(wèn)題

更新時(shí)間：2022年08月13日 11:52:11 作者：wikn116

這篇文章主要介紹了vue關(guān)于接口請(qǐng)求數(shù)據(jù)過(guò)大導(dǎo)致瀏覽器崩潰的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

關(guān)于接口請(qǐng)求數(shù)據(jù)過(guò)大導(dǎo)致瀏覽器崩潰

做vue后臺(tái)的時(shí)候，有一個(gè)導(dǎo)出所有用戶數(shù)據(jù)的需求，我這里是前端導(dǎo)出，用的是iview的exportCsv方法，在這里說(shuō)說(shuō)遇到的問(wèn)題吧。

首先看這里，查詢的時(shí)候，Size有155MB，最開(kāi)始在谷歌、火狐之類的上面測(cè)試，一切正常，后來(lái)被提出在360瀏覽器里頁(yè)面直接崩潰。

解決的方法也很簡(jiǎn)單

因?yàn)槟玫胶蠖藗鬟^(guò)來(lái)的數(shù)組后，賦值給了data里面的一個(gè)數(shù)組，即this.xxx = res.list（res.list為后端傳來(lái)的數(shù)組），代碼每次執(zhí)行到這里就崩潰了，聽(tīng)別人給我說(shuō)的是data數(shù)據(jù)太多導(dǎo)致內(nèi)存溢出，讓我別雙向綁定了，那么我就吧上面那行代碼注釋掉，就成功了。

順便再補(bǔ)充一個(gè)方法，使用freeze，只需要吧 this.xxx= res.list 改成 this.xxx = Object.freeze(userList)

只不過(guò)，不太推薦用freeze這個(gè)方法，如上圖所示，155MB的時(shí)候可以正常使用，后邊又用171MB的數(shù)據(jù)測(cè)試了下，瀏覽器又崩了！?。。ㄔ撍赖膰?guó)產(chǎn)瀏覽器）

一行代碼解決vue數(shù)據(jù)量大卡頓問(wèn)題

最近遇到一個(gè)需求，需要在地圖上顯示某地區(qū)的路網(wǎng)線路，結(jié)果后端直接返回了3w多條數(shù)據(jù)

每條線路下坐標(biāo)點(diǎn)接近100個(gè)

這四舍五入就是300w的數(shù)據(jù)啊。

而且還不能分層級(jí)顯示，只能一次性顯示全部打點(diǎn)，沒(méi)辦法，硬著頭皮放到地圖上吧。

開(kāi)發(fā)完成，打開(kāi)網(wǎng)頁(yè)，拖動(dòng)地圖，偶爾出現(xiàn)了卡頓的情況，但是，上線吧，能用就行

3天后

產(chǎn)品經(jīng)理：誒，這數(shù)據(jù)怎么不會(huì)變啊，你加個(gè)輪詢定時(shí)請(qǐng)求吧，還有地圖能不能有點(diǎn)動(dòng)態(tài)效果，隔一段時(shí)間隨機(jī)定位到某個(gè)地點(diǎn)吧，然后地圖打點(diǎn)點(diǎn)擊要有詳細(xì)數(shù)據(jù)的彈窗

打工人：…

加上輪詢，打開(kāi)網(wǎng)頁(yè)，拖動(dòng)地圖，出現(xiàn)了明顯的掉幀和卡頓的情況，但是，上線吧，能用就行

一天后

產(chǎn)品經(jīng)理：頁(yè)面沒(méi)怎么操作，怎么放著放著就崩了

打工人：…

打開(kāi)控制臺(tái)，打開(kāi)任務(wù)管理器，發(fā)現(xiàn)初次加載頁(yè)面內(nèi)存就占用了接近1G

第一次輪詢，內(nèi)存占用1.4G

第二次輪詢，內(nèi)存占用1.8G

每次輪詢，內(nèi)存占用就增大了400M，好家伙，這樣下去1T的內(nèi)存都不夠用啊（況且一個(gè)tab內(nèi)存占用到4G左右頁(yè)面就崩潰了）

這…不對(duì)啊，我明明地圖對(duì)象都移除了，數(shù)據(jù)也是重置了啊，內(nèi)存怎么一直在增大呢？

于是開(kāi)始了修bug之路

經(jīng)過(guò)反復(fù)調(diào)試和定位，發(fā)現(xiàn)是vue數(shù)據(jù)深度監(jiān)聽(tīng)和地圖對(duì)象存在引用關(guān)系導(dǎo)致內(nèi)存無(wú)法釋放（懷疑）

那這個(gè)問(wèn)題好解決啊，禁用vue深度監(jiān)聽(tīng)不就好了嗎

因?yàn)楸卷?xiàng)目中請(qǐng)求的數(shù)據(jù)只用于展示，不會(huì)對(duì)數(shù)據(jù)作修改，所以只需要在賦值data前把數(shù)據(jù)凍結(jié)即可

this.list = Object.freeze(list)

由于數(shù)據(jù)被凍結(jié)，所以vue無(wú)法深度遍歷數(shù)據(jù)給數(shù)據(jù)添加get和set屬性，這樣就減少了數(shù)據(jù)監(jiān)聽(tīng)?zhēng)?lái)的問(wèn)題，而且在大數(shù)據(jù)量的情況下**Object.freeze()**非常有用

**Object.freeze()**方法可以凍結(jié)一個(gè)對(duì)象，一個(gè)被凍結(jié)的對(duì)象再也不能被修改，當(dāng)然你可以將變量的引用替換掉

不能添加新屬性不能刪除已有屬性不能修改已有屬性的可枚舉性、可配置性、可寫性不能修改已有屬性的值不能修改原型

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: