JS 闭包内存泄漏的解决办法

最新推荐文章于 2024-08-02 09:37:51 发布

SuperSuperJoker

最新推荐文章于 2024-08-02 09:37:51 发布

阅读量776

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/LttleJoker/article/details/109255739

版权

闭包内存泄漏 JavaScript 事件监听器性能优化

关键词由CSDN通过智能技术生成

让我们通过一个小案例来看看闭包内存泄漏造成什么问题：

案例：此时我们希望点击任意一个div，能在控制台中打印出相对于div的自定义属性值

HTML部分：

<div desc="我是Joker">Joker1</div>
<div desc="我也是Joker">Joker2</div>

JS部分：

 let divs = document.querySelectorAll("div");
    divs.forEach(function (item) {
        let desc = item.getAttribute("desc");
        item.addEventListener("click", function () {
            console.log(desc);
            console.log(item);
        });
    })

此时我们看到，我们除了得到getAttribute的值外，还获取到了item值，这个item值相对我们来说是没用的，但是它会占用我们的内存空间，因此我们可以对代码进行优化。

解决办法很简单：当我们获取到desc的值后，我们重新把item的值赋值为null，即手动清除内存，这样做能减轻内存的负担，也不影响我们的需求。

let divs = document.querySelectorAll("div");
    divs.forEach(function (item) {
        let desc = item.getAttribute("desc");
        item.addEventListener("click", function () {
            console.log(desc);
            console.log(item);
        });
        item = null
    })