为了账号安全,请及时绑定邮箱和手机立即绑定

vue 数据绑定视图 数据量过大会导致页面卡顿

标签:
Vue.js


cms 管理系统遇到一个问题 , 本地商品页面在正式环境中会出现卡顿,闪退...而测试环境不会出现这种状况.

https://img1.sycdn.imooc.com//5caeb4550001f08014710971.jpg

分析问题

分析两者不同,估计可能是数据不同导致的...

查看正式环境请求返回数据发现,负责加载商品品牌的接口加载数据量过大,这些数据又绑定视图,生成大量页面元素造成的

https://img1.sycdn.imooc.com//5caeb4620001d30906460359.jpg

https://img1.sycdn.imooc.com//5caeb46c00019cf710850692.jpg



确定问题

将正式环境出问题的接口的返回数据注入easymock

开启whistle 将测试服的该请求接口替换为easymock请求数据

复现出问题,问题被确定

https://img1.sycdn.imooc.com//5caeb4c40001c32204320266.jpg

https://img1.sycdn.imooc.com//5caeb4c40001bc4614480318.jpg

https://img1.sycdn.imooc.com//5caeb4c40001cc0616980851.jpg




解决问题

替换element组件,将其改变成伪远程搜素的形式,避免大量数据直接经过绑定生成视图,问题得以解决

https://img1.sycdn.imooc.com//5caeb4de00012a9f12130600.jpg

https://img1.sycdn.imooc.com//5caeb4e70001ace009030580.jpg



靳肖健


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
76
获赞与收藏
1245

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消