关于接口请求数据过大导致浏览器崩溃

做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()**方法可以冻结一个对象,一个被冻结的对象再也不能被修改,当然你可以将变量的引用替换掉

不能添加新属性不能删除已有属性不能修改已有属性的可枚举性、可配置性、可写性不能修改已有属性的值不能修改原型

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

vue关于接口请求数据过大导致浏览器崩溃的问题的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. Android – 从浏览器访问本地主机,无需连接互联网

    我在Android平板电脑上安装了本地Web服务器.但是当所有连接都关闭时,每次我从内置浏览器访问本地站点时,我都会收到关于“没有互联网连接”的烦人弹出消息或者有关SIM卡的信息……有什么方法可以避免这种情况吗?

  3. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  6. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  9. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部