摘要：#技术分享Devtools 的问题，是通过 Chromium issues 中知道的。有条件的前端佬可以戳 这里 。没有条件的，我这里借花献佛说明下。比如下面这个例子：
最新消息，VUE 的 slot 移除产生内存泄漏问题已修复！！！前端佬们嗨起来~
分割线
这个是之前一个文章的后续，没有看过的前端佬可以点 这里 看看~
首先，向前端佬们说声，对不起！
怪自己学艺不精，没有仔细斟酌，上一篇文章里有一些错误，必须在这里指出来！
造成错误的原因有两个，Devtools 问题和 VUE 的 slots 的问题，没有看过之前的前端佬也没有关系，因为这个关乎很多前端佬的测试。以下为详情。
#技术分享Devtools 的问题，是通过 Chromium issues 中知道的。有条件的前端佬可以戳 这里 。没有条件的，我这里借花献佛说明下。比如下面这个例子：
方块从左到右动画.square { width: 50px; height: 50px; background-color: red; position: absolute; top: 50px; left: 0; animation: moveRight 2s linear infinite; } @keyframes moveRight { from { transform: translateX(0); }to { transform: translateX(200px); } } .animation-paused { animation-play-state: paused; } 移除方块let square = document.getElementById('animatedSquare'); const removeButton = document.getElementById('removeButton'); const handleRemove = => { if (square) { square.classList.add('animation-paused'); requestAnimationFrame( => { square.remove; square = undefined; console.log("方块已移除"); }); } }; removeButton.addEventListener('click', handleRemove);当你一直打开 Devtools 工具时（即按开 F12），然后点击移除元素。然后测试一下，发现仍然存在分离元素，如下图：
明明已经移除所有事件、排除了全局变量的原因，还是有内存泄漏的问题。我这边经过 chrome134、chrome135验证两个版本的验证，都存在。
没别的了，就是 Devtools 的问题。按照 Chromium 项目人员解释的原因，如下图：
翻译中心思想就是，Animations （动画） 面板中保留了对动画元素的引用。
所以要测试带有动画元素的组件，需要在操作完毕之后，再打开 Devtools 面板。
还是先上链接，有条件的可以看 vue 的 commit。点 这里
没条件，我这边可以举例子来解释下。
假如有这么一个父组件：
然后我引用这个组件。
111Hiddenimport { ref } from 'vue' imprt ParentJBK from './parentJBK.vue'export default { components:{ ParentJBK }, setup{ const model = ref(false) function fn1{ model.value = true; } return { model, fn1 } } }按照上面的，如果在父组件下，填充了元素。那么，这个时候去销毁掉父组件元素，就会在分离元素下出现销毁的 div 元素。有意愿的可以动手试试。
看上面的那个 commit，大概思路就是在父组件销毁后，顺道把 slot 销毁掉。
经过这么一轮，我觉的，给来个痛快的吧。
以上的发现，都是在提了 Element-plut 的 issues 后，经过 Element-plus 贡献者提出的。然后涉及的背后问题，我事先是想都想不到的。谁敢想 Devtools 都有问题，原来可是我朝圣的对象啊~。。。
对于内存泄漏问题，这里有必要再和大家颗粒度对齐下~
内存泄漏是指程序在申请使用内存后，无法在程序关闭后正常释放应该释放的内存，导致此内存一直被占据。
用上面这个例子解释就是，当我们使用 JS 去销毁 DOM 元素后，但因为某些 JS 变量或者事件或者哪个回调函数中还存在引用这段 DOM 元素，导致 DOM 树上的元素是被移除了，而内存却还保留了 DOM 元素数据。结果就是随着操作一直增加，占用内存得不到释放，该程序使用的内存就会一直增加。
之前评论中，有些前端大佬说，使用 Element-plus 组件，总是卡。我们倒可以先分析分析，看看是不是在渲染的时候，出现了跳帧的情况。即元素节点渲染过多或者 JS 某个程序运算过多，造成在16ms 左右不能渲染完整。
跳帧情况会很多，大家在 juejin 中看看其他大佬的文章，有很多说明。
才疏学浅，随时接受大佬的赐教~
评论也可以贴出自己的问题，大家共同进步 respect！
来源：墨码行者
