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

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

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

解決的方法也很簡單

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

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

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

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

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

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

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

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

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

3天后

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

打工人：…

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

一天后

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

打工人：…

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

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

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

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

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

于是開始了修bug之路

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

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

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

this.list = Object.freeze(list)

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

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

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

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

最新評論