vue接口請求數據過大導致瀏覽器崩潰的問題怎么解決

這篇文章主要介紹“vue接口請求數據過大導致瀏覽器崩潰的問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue接口請求數據過大導致瀏覽器崩潰的問題怎么解決”文章能幫助大家解決問題。

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

做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()**方法可以凍結一個對象，一個被凍結的對象再也不能被修改，當然你可以將變量的引用替換掉

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

關于“vue接口請求數據過大導致瀏覽器崩潰的問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。