前端项目使用vue3 element-plus ts vite搭建 逐渐暴露出来的问题有:
- 路由切换 内存逐渐增大 切换多个路由后 页面占用内存达到2g
- 路由切换缓慢 loading可能得2-3秒
针对这两个问题 开始进行排查
参照: developer.chrome.com/docs/devtoo…
排查流程 :
- 先使用google开发者工具 主要看性能监视器 执行路由切换动作 发现js堆大小与dom节点会一直上涨 确定当前页面存在内存泄漏
-
注释掉dom元素 再查看是否内存泄漏 结果发现堆内存大小与dom节点并没有很大变化 逐步放开注释 最终发现问题出在 el-tree-select
-
使用Memory面板 选择堆快照 ( 堆快照是识别已分离节点的一种方式。顾名思义，堆快照可显示快照发生时内存在您页面的 JS 对象和 DOM 节点之间的分配情况 ) 再通过手动进行内存释放 切换路由 再记录对快照情况发现游离Dom节点以及Array,Object等都不断增加 并且手动内存释放无法释放这部分内存
- 可能是游离dom过多导致内存泄漏 查看页面组件 发现el-tree-select的 render-after-expand 属性被设置为了false 使得在初次加载时便加载了整个el-tree树节点 在页面切换时候这些dom未被正常销毁
最终修改属性后 页面内存飙升问题基本解决. ( 排查中走了蛮多弯路, 但从堆内存数据展开来看无法辨别是什么数据导致内存泄漏, 只能实现一个最小demo. 还得结合github issues进行排查 )
