vue项目内存泄漏、性能优化总结

最近在客户现场发现项目会有内存泄漏的情况，导致操作一天电脑就卡死，现大体总结如下：

1、$route的监听使用场景
2、大对象的使用，是否回收（手动置null）
3、store的使用
4、window的使用
5、addEventListener的使用，记得unbind
6、第三方工具的使用，记得unbind
7、event bus使用，记得off

目前定位的场景有：

1.console.log打印vue实例，会每次刷新页面导致内存+10M左右，所以发线上的时候请一定配置webpack打包时过滤，已经过滤debugger。（坑逼，居然log也是导致泄漏）

2.通过eventBus进行通信的时候，请在页面销毁时off掉，setTimeOut、addEventListener也是同理。

3.lodash等第三方库请按需引入，不然组件引了一次，子组件又引了一次，就是导致没必要的内存占用和泄漏的风险。

4.这种dispatch的操作也会导致内存泄漏。

this.$store.dispatch('transcap/monitor/getPositionHistory', {self: this,params: {transOrderPkId: orderId}})

5.Select组件添加transfer属性后每次弹出层都会在body里新增dom,不刷新浏览器无法被销毁。优化方案，每次点击tab上的刷新按钮手动清除class 有“v-transfer-dom"的dom，这种会有风险，建议在具体的页面或者小范围调整，不建议全局操作。

如有新的定位是持续记录~

大家排查自己项目的时候，一定不要考虑是不是vue框架有问题，或者vue3新特性有问题，一定要先排查自己的代码，因为大佬发出来的框架肯定是已经考虑过内存泄漏的问题了，所以我们这些菜鸡切莫怀疑是vue框架的问题。就快速定位快速解决吧~

vue项目内存泄漏、性能优化总结相关推荐

Android性能优化(2)：常见内存泄漏与优化（二）
文章目录 1. Android虚拟机:Dalvik和ART 1.1 JVM与Dalvik区别 1.2 Dalvik与ART区别 1.3 Dalvik/ART的启动流程 2. 常见内存分析工具 2.1 ...
来点干货 | Android 常见内存泄漏与优化（二）
作者 | 无名之辈FTER 责编 | 夕颜出品 | CSDN(ID:CSDNnews) 在昨天的Android 内存泄漏问题多多,怎么优化?一文中,我们详细阐述了Java虚拟机工作原理和Androi ...
视频教程-iOS底层原理班（下）/OC对象/关联对象/多线程/内存管理/性能优化-iOS
iOS底层原理班(下)/OC对象/关联对象/多线程/内存管理/性能优化小码哥教育CEO,曾开发了2个iOS的流行开源框架(MJRefresh.MJExtension),目前在国内的使用率非常高. 李 ...
vue渲染大量数据如何优化_加速vue组件渲染之性能优化
背景平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { da ...
gperftools mysql_利用 gperftools 对nginx mysql 内存管理性能优化
利用 gperftools 对nginx 与 mysql 进行内存管理性能优化降低负载. Gperftools 是由谷歌开发.官方对gperftools 的介绍为: These tools ...
vue项目的首屏优化策略
虽然标题是vue项目的首屏优化策略,但是里面绝大部分的方法,对于其他语言写成的单页应用同样适用 1.使用路由懒加载首屏进入时,直接加载和首屏相关路由,其他全部路由组件实现懒加载,即打开该路由时再去加 ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
iOS底层原理班（下）/OC对象/关联对象/多线程/内存管理/性能优化-李明杰-专题视频课程...
iOS底层原理班(下)/OC对象/关联对象/多线程/内存管理/性能优化-236人已学习课程介绍得遇名师,突飞猛进!iOS培训王者MJ(李明杰)老师精心研发,iOS进阶课程,实用技术 ...
Vue中常见的性能优化，项目优化/单页面性能优化,Vue中六大优化方案
1.编码优化 1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher 2. vue在v-for时给每项元素绑定事件需要用事件代理 3. ...

vue项目内存泄漏、性能优化总结

vue项目内存泄漏、性能优化总结相关推荐

最新文章

热门文章