vue關於介面請求資料過大導致瀏覽器崩潰的問題

2022-08-13 18:01:11

關於介面請求資料過大導致瀏覽器崩潰

做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的資料測試了下，瀏覽器又崩了！！！（該死的國產瀏覽器）

最近遇到一個需求，需要在地圖上顯示某地區的路網線路，結果後端直接返回了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()**方法可以凍結一個物件，一個被凍結的物件再也不能被修改，當然你可以將變數的參照替換掉

不能新增新屬性不能刪除已有屬性不能修改已有屬性的可列舉性、可設定性、可寫性不能修改已有屬性的值不能修改原型

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。