ElemeFE / ElemeFE/element

[Bug Report] el-image预览图片关闭之后存在内存泄漏

Open
#22,924 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Element UI version
2.15.14

### OS/Browsers version
windows

### Vue version
2.7.14

### Reproduction Link
https://jsfiddle.net/27noyrx0/4/

### Steps to reproduce
1. 开启DevTools之后, 切到内存界面,
2. 直接点图片预览大图, 预览大图界面打开后, 直接点阴影部分关闭预览大图界面
3. 回到Devtools的内存界面, 选择真实渲染的虚拟机实例,, 先点击垃圾回收按钮触发垃圾回收, 之后直接拍摄内存快照,
4. 内存快照中搜索Detached的DOM, 发现预览大图界面相关的DOM节点都没有得到正确的垃圾回收
![39f0037e5c24fd39aefc4bd4e5ef945](https://github.com/user-attachments/assets/96ddd033-6e56-41b2-bf33-3f9c36cf6d21)

查看Element的el-image源码调试情况如下
image-viewer添加after-leave的钩子查看情况
![image](https://github.com/user-attachments/assets/7729fd97-5209-4a5f-a56c-e369719896d2)
![496f21cb44b0805173ddf51179a1062](https://github.com/user-attachments/assets/aacbb130-74e7-44f1-a251-9aa8010ed5e8)
调试时, 发现destroyed生命周期走到了after-leave函数的前面
![6c03dff13c93e4933c5d5bd7914d5df](https://github.com/user-attachments/assets/7ab1de46-9c57-43fc-b97c-e8a2a26b54c6)
根据vue源码的情况判断, after-leave执行时, 会自动清理父节点上存在的VNode信息, 此时因为destroyed周期里面就把节点移除了, 但是transition的after-leave钩子是在destroyed周期后才触发的, 因此走到after-leave那边时, Vue框架获取该元素的父级元素就获取不到, 从而导致对于绑定在父级元素上的VNode就没有得到有效的清理, 从而造成一直会在父级dom节点上存在对于VNode的引用, VNode又保持着对于预览界面DOM节点的引用, 预览大图界面的DOM节点就没办法被GC回收了
![8a5c3e0812f42ec75696e3ee6f8e411](https://github.com/user-attachments/assets/c8d15c5d-9fae-4a1b-9dbd-956c51005dc4)
![a194b61f4dbcf54bcf881b0c0515ae5](https://github.com/user-attachments/assets/3f4fd7a8-f146-4a5c-bb9a-fa793dbfceba)

### What is Expected?
预览大图界面关闭后, 点击DevTool中的垃圾回收时, DOM节点能正常的被回收

### What is actually happening?
预览大图界面关闭后, 点击DevTool中的垃圾回收时, DOM节点没有回收

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.