vue项目中请求数据特别多导致页面卡死

最新推荐文章于 2024-05-04 19:32:07 发布
最新推荐文章于 2024-05-04 19:32:07 发布
阅读量6.4k 收藏 8
点赞数 2
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47987261/article/details/123481159
版权

1. 在平时开发中经常会碰到数据量特别大，请求接口时导致页面卡死或者崩溃的情况

 

上图这里就是因为数据太大导致页面在数据请求回来之前一直处于卡死的状态，这种时候可以使用freeze方法来为数组赋值，将 this.xxx = res 改为 this.xxx = Object.freeze(res) ，仅供参考。

ps: 本人小白一枚，目前我碰到的是可以用这种方法解决

不会编程的程序员.
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
vue如何从接口请求数据
08-30
在本文中，我们将介绍如何使用Vue.js从接口请求数据，并将其应用于实际项目中。通过本文，您将了解到如何使用Vue.js的生命周期钩子函数、methods、数据绑定等概念来实现数据请求和处理。 生命周期钩子函数 在Vue....
大批量接口请求的前端优化
weixin_43114209的博客
04-01 1753
在前端开发中，我们经常会遇到需要一次性发送大量接口请求的场景，比如在数据初始化、数据导入等操作中。如果不对这些请求进行合理的优化，可能会导致页面加载缓慢、用户体验下降，甚至引发浏览器崩溃。本文将介绍几种针对大批量接口请求的前端优化方法。大批量接口请求的前端优化是一个复杂而重要的问题。通过合并请求、使用防抖和节流、Web Workers、缓存请求结果以及分页和懒加载等技术，我们可以显著提高应用的性能和用户体验。在实际开发中，需要根据具体场景和需求选择合适的优化策略。
本地存储的3种方式、vuex的比较
laos1的博客
01-17 4021
localStorage 除非手动删除，否则会永久存储在浏览器中。 存储最大限制一般为5M或更多（不同浏览器不同）。 支持sessionStorage的浏览器最小版本：IE8、Chrome 5 存储内容过多会消耗内存空间，导致页面变卡。 常用方法： let storage = window.localStorage storage.setItem('key', 'value') // 存储，key...
2024年vue数据太多导致页面卡顿解决办法_vue下拉框数据过多卡顿的原因，花三分钟看完这篇文章你就懂了
最新发布
2401_84411522的博客
05-04 877
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
关于Vuex
qq_39872626的博客
04-14 997
1、Vuex可以持久化存储吗？ 不可以 （可能会这么问：组件中应用了state中的一个数据，并进行了修改，但是刷新页面，数据又回去了，这是为什么？因为vuex只是一个仓库，不可以持久化存储，要想持久化存储，只能用localStorage或者cookie） 2、Vuex是单向数据流还是双向数据流？ 单向数据流，组件只能使用不能修改数据，会报错，只能在mutation中修改 3、Vuex和localStorage的区别 （1）.实质区别 vuex存的是状态，存储在内存；localStorage是浏览
vue数据太多导致页面卡顿解决办法
qq_43307723的博客
02-15 5163
vue数据太多导致页面卡顿解决办法，列表数据行数列数过多，数据打，页面卡顿延迟。下拉列表一次返回数据过多，造成页面卡顿。
一行代码解决vue数据量大卡顿问题
weixin_44775548的博客
09-29 1万+
最近遇到一个需求，需要在地图上显示某地区的路网线路，结果后端直接返回了3w多条数据，每条线路下坐标点接近100个，这四舍五入就是300w的数据啊。而且还不能分层级显示，只能一次性显示全部打点，没办法，硬着头皮放到地图上吧。 开发完成，打开网页，拖动地图，偶尔出现了卡顿的情况，但是，上线吧，能用就行 3天后 产品经理：诶，这数据怎么不会变啊，你加个轮询定时请求吧，还有地图能不能有点动态效果，隔一段时间随机定位到某个地点吧，然后地图打点点击要有详细数据的弹窗 打工人：… 加上轮询，打开网页，拖动地图，出现了明显
Vuex代码优化--数据表现
AsaZyf的博客
12-10 345
一、state 优化前： 优化后： ... 表示展开运算符，mapState表示把Vuex里面的数据映射到computed，把city公用数据映射到city的计算属性之中 也可以另起名字： 二、mutations ...
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
在Vue.js开发过程中，经常会遇到页面初始化时由于数据还未加载完成而导致访问数据字段时出现`undefined`的错误。这个问题通常是由于Vue组件的生命周期导致的，因为Vue组件在数据请求完成前就已经进行了初次渲染。...
vue 请求后台数据的实例代码
08-30
在 Vue 项目中，我们可以使用 Vue.Resource 库来实现数据请求。首先，我们需要在入口函数中引入 VueResource，并使用 Vue.use(VueResource) 来启用它。然后，我们可以使用 this.$http.get 或者 this.$http.post 来...
Vuex笔记
m0_62475892的博客
04-10 185
vue自学笔记
Vue 中使用 axios 传输数据，当数据量过大时会提示跨域？（√已解决）
weixin_43848954的博客
06-03 3755
环境 – 前端：Vue-cli 4.3.1 后端：Apache || Nginx+Thinkphp5 今天打算用写一个Markdown编辑器给博客用，然后需要将Markdown原文和解析好的HTML提交后端，遇到跨域 Access to XMLHttpRequest at 后端接口 from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header .
解决Vue刷新数据量过大而造成数据获取不到问题
weixin_43483324的博客
12-01 336
当使用Vuex存储数据时，刷新页面会导致数据丢失的问题是因为Vuex的状态是在内存中保存的，而不是持久化到本地存储。请注意，`vuex-persistedstate`默认使用`localStorage`作为存储引擎。要解决这个问题，你可以考虑将Vuex的状态持久化到本地存储中，以便在页面刷新后可以重新加载数据。通过以上步骤，Vuex的状态将会自动保存到本地存储中，并在页面刷新后重新加载。这样，每当页面刷新时，Vuex的状态将会从存储中加载，以便恢复之前保存的数据。// ...其他配置...
Vue中解决数据量过大导致页面崩溃；解决方案
热门推荐
lys20000913的博客
04-29 1万+
解决表格数据量过大（使用插件vxe-table） 点击进入插件地址 解决select 数据量过大 （使用插件vue-virtual-scroll-list） 相关博文 插件官网
页面一次性加载数据过多时，页面卡死怎么办
铃儿响叮当
09-16 1万+
问题：当后端一次性返回数据(array)过多时（例如1000条或者更多），会导致页面卡顿 优化思路：将这1000条数据划分为多个小数组，然后一段一段的加到页面上 解决方案：利用window.requestAnimationFrame()或者setInterval() 示例：以window.requestAnimationFrame()为例 window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要.
Vue 大量数据展示卡顿解决方案（长列表优化）
Admans的专栏
12-14 4153
使用插件展示大量数据，是可以比较流畅的渲染 / 滚动的作者：雪急飞绪来源：CSDN原文：https://blog.csdn.net/qq_38689395/article/details/116757771版权声明：本文为作者原创文章，转载请附上博文链接！CSDN,CNBLOG博客文章一键转载插件。
记一次VUE项目中内存崩溃的排查
如果有了可惜
02-22 1156
Chrom 内存崩溃 页面白屏
vue 项目发起请求前，先获取请求数据
06-01
在 Vue 项目中，在发起请求前获取请求数据可以使用一些生命周期钩子函数和实例属性。例如，可以使用 `created` 钩子函数来在组件实例创建完成后获取请求数据，然后在 `mounted` 钩子函数中发起请求。具体代码实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值