vue關於接口請求數據過大導致瀏覽器崩潰的問題

Posted on by

關於接口請求數據過大導致瀏覽器崩潰

做vue後臺的時候，有一個導出所有用戶數據的需求，我這裡是前端導出，用的是iview的exportCsv方法，在這裡說說遇到的問題吧。

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

解決的方法也很簡單

因為拿到後端傳過來的數組後，賦值給瞭data裡面的一個數組，即this.xxx = res.list（res.list為後端傳來的數組），代碼每次執行到這裡就崩潰瞭，聽別人給我說的是data數據太多導致內存溢出，讓我別雙向綁定瞭，那麼我就吧上面那行代碼註釋掉，就成功瞭。

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

隻不過，不太推薦用freeze這個方法，如上圖所示，155MB的時候可以正常使用，後邊又用171MB的數據測試瞭下，瀏覽器又崩瞭！！！（該死的國產瀏覽器）

一行代碼解決vue數據量大卡頓問題

最近遇到一個需求，需要在地圖上顯示某地區的路網線路，結果後端直接返回瞭3w多條數據

每條線路下坐標點接近100個

這四舍五入就是300w的數據啊。

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

開發完成，打開網頁，拖動地圖，偶爾出現瞭卡頓的情況，但是，上線吧，能用就行

3天後

產品經理：誒，這數據怎麼不會變啊，你加個輪詢定時請求吧，還有地圖能不能有點動態效果，隔一段時間隨機定位到某個地點吧，然後地圖打點點擊要有詳細數據的彈窗

打工人：…

加上輪詢，打開網頁，拖動地圖，出現瞭明顯的掉幀和卡頓的情況，但是，上線吧，能用就行

一天後

產品經理：頁面沒怎麼操作，怎麼放著放著就崩瞭

打工人：…

打開控制臺，打開任務管理器，發現初次加載頁面內存就占用瞭接近1G

第一次輪詢，內存占用1.4G

第二次輪詢，內存占用1.8G

每次輪詢，內存占用就增大瞭400M，好傢夥，這樣下去1T的內存都不夠用啊（況且一個tab內存占用到4G左右頁面就崩潰瞭）

這…不對啊，我明明地圖對象都移除瞭，數據也是重置瞭啊，內存怎麼一直在增大呢？

於是開始瞭修bug之路

經過反復調試和定位，發現是vue數據深度監聽和地圖對象存在引用關系導致內存無法釋放（懷疑）

那這個問題好解決啊，禁用vue深度監聽不就好瞭嗎

因為本項目中請求的數據隻用於展示，不會對數據作修改，所以隻需要在賦值data前把數據凍結即可

this.list = Object.freeze(list)

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

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

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：