前端内存泄漏代码示例

前端JavaScript内存泄漏通常发生在DOM操作、定时器和事件监听器上。以下是一个简单的示例，说明了不当处理闭包可能导致的内存泄漏：

function createLeakage() {
    var element = document.createElement('div');
    element.textContent = 'Leaking Element';
    
    // 创建了一个闭包，这里的element不会被垃圾回收
    (function loop() {
        setTimeout(function() {
            console.log(element); // 永远持有element的引用
            loop(); // 循环引用
        }, 1000);
    })();
}

createLeakage();

在这个例子中，`loop`函数内部创建了一个定时器，它每秒打印`element`。由于`loop`函数形成了一个闭包，它永远持有对`element`的引用，即使`element`已经从DOM树中移除，其引用也不会消失。当类似这样的闭包存在且没有手动解除引用时，就会导致内存泄漏。

要防止这种情况，可以确保每次创建元素后都正确地清理定时器和取消事件监听：

function safeCreateLeakage() {
    var element = document.createElement('div');
    element.textContent = 'Safe Element';

    var timerId;
    function cleanup() {
        if (timerId) {
            clearTimeout(timerId);
            element.removeEventListener('click', handleClick);
            timerId = null;
        }
    }

    function handleClick() {
        // ...你的业务逻辑...
        cleanup(); // 清理闭包和引用
    }

    element.addEventListener('click', handleClick);

    // 当不再需要元素时，手动调用cleanup()
    // ...
}

在这里，添加了一个`cleanup`函数负责清除定时器和事件监听，确保内存能够被及时释放。