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

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

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

赞 (0)

相关推荐

  • 解决vue中使用Axios调用接口时出现的ie数据处理问题

    1.问题 近期在使用vue2 + axios 调用接口时碰到一个IE中很奇葩的问题,让我头痛了很久. 废话不多扯,就是在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且也能抓到服务端返回来的数据.却发现在处理返回来的数据的时候处理的有点问题,怎么搞就是不行. 2.处理过程及方法 我使用了console大法去解决这个问题,具体是这样的:我先将服务器返回过来的数据打印到浏览器控制台,结果发现都能打印出来,这个时候就郁闷了,明明有数据为何在IE上还是

  • 解决vue请求接口第一次成功,第二次失败问题

    使用vue去请求接口发现问题来了: 我请求只能请求一次,然后在按按钮去请求的时候发现 502(这个是接口定义的)502就是传了空的值过来 这个是其中一种情况,还有别的情况 你看了 大可试试我这样的办法 然后发现我前端代码没有问题,接口代码也没有问题 data() { return { form: { old_password: '', new_password: '', confirm_password: '' } } }, 就是把值在重新赋值回去就可以解决了 this.$http.post('

  • Vue中使用axios调用后端接口的坑及解决

    Vue中使用axios调用后端接口的坑及解决

    目录 axios调用后端接口的坑 问题场景 总结了如下场景 调用后端接口 使用axios跨域问题 首先找到项目中vue.config.js axios调用后端接口的坑 问题场景 Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况 总结了如下场景 @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定Content-Type默认就是application/x-www-f

  • 详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

    业务上出现一个问题:如果连续对同一个接口发出请求,参数不同,有时候先请求的比后请求的返回数据慢,导致数据顺序混乱,或者数据被覆盖的问题,所以需要控制请求的顺序. 解决方法: 1.直接跟后台沟通,将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用. 2.对于出现返回的数据混乱问题. 假设场景: 页面中需要对三个部门请求对应的部门人员,三个部门人员的数据为一个二维数组,连续发送请求,但由于返回数据的顺序不定,导致数组中的数据顺序不是按照部门的顺序. 解决方法:使用promise

  • vue关于接口请求数据过大导致浏览器崩溃的问题

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

    目录 关于接口请求数据过大导致浏览器崩溃 解决的方法也很简单 一行代码解决vue数据量大卡顿问题 关于接口请求数据过大导致浏览器崩溃 做vue后台的时候,有一个导出所有用户数据的需求,我这里是前端导出,用的是iview的exportCsv方法,在这里说说遇到的问题吧. 首先看这里,查询的时候,Size有155MB,最开始在谷歌.火狐之类的上面测试,一切正常,后来被提出在360浏览器里页面直接崩溃. 解决的方法也很简单 因为拿到后端传过来的数组后,赋值给了data里面的一个数组,即this.xxx

  • vue如何从接口请求数据

    这两天学习了vue如何从接口请求数据,所以,今天添加一点小笔记. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

  • 网站导致浏览器崩溃的原因总结(多款浏览器) 推荐

    面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏.其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作. 对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因: 1. 内存泄漏 还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃.内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统

  • vue.js实现请求数据的方法示例

    vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function() { this.$nextTick(function () { this.$http.jsonp('http://***.com').then(function(res) { console.log(res.data) this.gridData = res.data; }) }) }, })

  • vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

    vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

    目录 打包chunk-vendors.js过大导致页面加载缓慢 1.chunk-vendors.js 简介 3.chunk-vendors.js 文件大小分析 3.方式一 4.其他方式 chunk-vendors过大导致首屏加载太慢的优化 1.安装compression-webpack-plugin插件 2.接下来要去修改vue的配置文件 vue.config.js 3.nginx配置 打包chunk-vendors.js过大导致页面加载缓慢 1.chunk-vendors.js 简介 顾名思义

  • Vue生命周期activated之返回上一页不重新请求数据操作

    activated: 英文原意:使活动.触发 在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求 前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置 二.尝试 常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,

  • Vue如何调用接口请求头增加参数

    目录 Vue调用接口请求头增加参数 Vue取消接口请求 接口js文件 页面中引用 总结 Vue调用接口请求头增加参数 import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // 基础配置 if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //线上版本域名 // a

  • SpringBoot http post请求数据大小设置操作

    背景: 使用http post请求方式的接口,使用request.getParameter("XXX");的方法获取参数的值,当数据量超过几百k的时候,接口接收不到数据或者接收为null. @RequestMapping(value = "/rcv",method = RequestMethod.POST) public ResInfo<String> pullApi(HttpServletRequest request) { String channe

  • 谈一谈vue请求数据放在created好还是mounted里好

    建议放在created里 created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作. 如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了 补充知识:vue各阶段数据可使用情况:created,computed,data,prop

随机推荐