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

最新推荐文章于 2024-05-16 10:00:20 发布
最新推荐文章于 2024-05-16 10:00:20 发布
阅读量4.7k 收藏 3
点赞数 5
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wd1073351726/article/details/121099868
版权

做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的数据测试了下，浏览器又崩了！！！（该死的国产浏览器）

wikn116
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于vue，解决打开新窗口被浏览器拦截的问题
weixin_43834376的博客
04-15 8336
首先，我们先来说一下在什么情况下，新窗口会被阻截，以及阻截的原因。 当使用 window.open(url,"_blank")打开新窗口时，如果url是通过ajax从后台获取 到的时候，浏览器就会出现拦截的问题。 因为，当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这可能是一个广告，不是一个用户希望看到的页面。 那么，我们就要考虑，如何才能将ajax请求的url，不被浏...
Video-Storage:允许在任何设备上的indexedDB上存储大文件（> 100Mb），而不会崩溃。 易于安装和使用
05-20
视频存储视频存储旨在允许将大文件存储在indexedDB中，而不会在IOS设备上出现问题。 由于出现流媒体网站发生崩溃的情况，因此我正在开发此程序。 它同时适用于音频和视频文件兼容性浏览器兼容性笔记Chrome（PC） :...
CPU访问请求过高问题分析与解决方案
joken200898的博客
09-15 152
一小时等于 3600 秒，那么 一小时的流量大约就是 4.5 Mb/s * 3600 = 16200Mb = 1.97 GB ，是大致符合 我们的流量扣费的。iftop是Linux系统中一个免费的网卡实时流量监控工具，可以监控包括指定网卡的实时流量、端口连接信息、反向解析IP等信息。比如输入相应IP地址，回车后，屏幕就只显示这个IP相关的流量信息。右侧部分是实时流量信息，分别是该访问IP连接到本机2秒、10秒和40秒的平均流量。第一列：TX表示发送流量，RX表示接收流量，TOTAL表示总流量。
如何加速浏览器内容的响应
加金开发
04-26 497
主要有两大板块 1，代码 2，硬件 代码 1.必要的js和css文件 分开放 功能类放在结束（要提交的ajax文件等） 展示的放在页面开头（布局文件等） 2，优化代码添加Expires头 添加Expires头 页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。 ...
Vue项目浏览器出现out of memory（小白版）
最新发布
weixin_50324975的博客
05-16 706
解决浏览器崩溃out of memory
【总结】网站令浏览器崩溃的原因
weixin_30900589的博客
01-16 653
　　面试某公司的时候，面试官问到，导致浏览器崩溃的原因有哪些？愚辈不才，仅回答出了内存泄漏。其实在网页在装载的过程中，常常由于种种原因使浏览器的反映变的很慢，或造成浏览器失去响应，甚至会导致机器无法进行其他的操作。 　　对于访客，如果登录您网站，浏览器就立刻崩溃，我想这对谁都是无法容忍的，对此总结了网站导致浏览器崩溃的原因： 1. 内存泄漏 　　还是先谈下内存泄漏，网站由于内存...
书生浏览器不能打开这个文件或者url_前端都该懂的浏览器工作原理，你懂了吗？...
weixin_39928099的博客
11-26 674
前言在我们面试过程中，面试官经常会问到这么一个问题，那就是从在浏览器地址栏中输入URL到页面显示，浏览器到底发生了什么？这个问题看起来是老生常谈，但是这个问题回答的好坏，确实可以很好的反映出面试者知识的广度和深度。本文从浏览器角度来告诉你，URL后输入后按回车，浏览器内部究竟发生了什么，读完本文后，你将了解到：浏览器内有哪些进程，这些进程都有些什么作用浏览器地址输入URL后，内部的进程、...
Vue学习——trading-vue.js中的内存泄露问题及导致浏览器的崩溃问题
m0_37876745的博客
07-25 1030
vue学习，解决一个在trading-vue.js使用过程中出现的内存泄露问题
vue项目因提供的内存不足启动报错
fan2016434589的博客
03-12 6426
内存不足的解决办法
vue应用开发过程中在谷歌浏览器遇到的奇葩问题——谷歌插件屏蔽接口请求
小圣贤君的博客
05-14 5051
在开发过程中，碰到了这么一个问题： 通过postman来掉接口请求，正常；直接在浏览器地址中发送请求也正常，但是再应用中发起请求就会失败，请求根本不会发送出去。 将该应用在edge中打开，一切正常。 经检查，原来是谷歌插件Adblock Plus造成的问题，屏蔽了我的请求。 我的请求内容： 一个GET请求，请求的路径中包含以下内容：/adsense/getAdsenseList 关掉A...
模仿百度网盘实现大文件pdf预览(分页转码实现)
02-01
2. **分页处理**：由于大文件一次性加载可能会消耗大量内存并导致浏览器崩溃，所以采用分页处理技术。每个PDF页面被单独转换为HTML，这样用户可以逐页加载，减少资源占用。 3. **PDF转HTML**：这个过程中，我们需要...
分析浏览器底层事件循环处理机制.pdf
01-02
前端浏览器的应用程序开发与以前传统的前端开发有很大不同，前端软件的功能越来越复杂，开发架构也非常多，例如Vue、React和Angular等。要想熟练地开发各种前端应用，就必须熟悉JS引擎对各种消息事件的处理过程。 ...
表格数据做分页的逻辑
04-27
在网页或应用中，当数据量过大时，一次性加载所有数据可能导致页面响应速度变慢，甚至造成浏览器崩溃。分页就是将大量数据分成若干个小部分，每次只加载一部分（一页）到用户界面上，通过导航按钮让用户按需加载其他...
数据分页的代码
04-14
这样可以避免一次性加载过多数据导致页面响应慢或者浏览器崩溃的问题。 二、分页的实现方式 1. 客户端分页：在浏览器端进行分页，服务器一次性返回所有数据，然后由前端根据当前页数和每页显示数量进行切割。这种...
浏览器崩溃，内存泄漏，内存不足Debugging connection was closed. Reason: Render process goneReconnect when ready by r
qq_45503103的博客
11-21 4476
Debugging connection was closed. Reason: Render process goneReconnect when ready by reopening DevTools.
分析前端内存溢出的原因，前端页面占用内存大是怎么回事，vue页面如何把浏览器搞崩溃
热门推荐
南城九尾
03-08 1万+
内存泄漏: 内存泄漏（Memory Leak）是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。（程序某个未使用的变量或者方法，长期占用内存不会释放，导致内存堆积浪费） 内存溢出: “内存溢出(Out Of Memory，简称OOM)是指应用系统中存在无法回收的内存或使用的内存过多，最终使得程序运行要用到的内存大于能提供的最大内存。此时程序就运行不了，系统会提示内存溢出，有时候会自动关闭软件，重启电脑或者软件后释放掉一部分内存又可以
巨树：基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染。
refined_x的博客
08-09 1万+
vue-giant-tree
记一次VUE项目中内存崩溃的排查
如果有了可惜
02-22 1177
Chrom 内存崩溃 页面白屏
vue 请求接口返回数据渲染后发起请求
05-18
您可以在 Vue 组件中使用生命周期钩子函数 `mounted` 来发起请求并渲染数据。 例如，假设您有一个组件 `UserList`，需要从后端接口获取用户列表并渲染到页面上。可以在 `mounted` 钩子函数中使用 Vue 的内置 `axios` 库发起请求，并将返回的数据赋值给组件的 `users` 数据属性。 ```vue <template> <div> <h2>User List</h2> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { users: [], }; }, mounted() { axios.get('/api/users').then((response) => { this.users = response.data; }); }, }; </script> ``` 在上面的例子中，我们使用了 `axios.get` 方法发起了一个 GET 请求，并将返回的数据赋值给组件的 `users` 数据属性。然后，在模板中使用 `v-for` 指令来遍历用户列表并渲染到页面上。 需要注意的是，这只是一个简单的示例代码，实际使用中还需要考虑错误处理、loading 状态等情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wikn116

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值