Canvas对象超出作用域未消失，是否持续占用内存？

首先，你观察到的现象是正常的，咱们一步步拆解原因和解决方案：

为什么旧Canvas还能在控制台看到？ #

• 首先，Safari的开发者工具为了方便调试，会主动保留所有创建过的DOM元素引用——哪怕这些元素已经脱离DOM树、没有被你的代码继续引用。所以你在Canvas标签页看到的旧对象，很大一部分是DevTools为了调试留存的，不一定意味着它们还在占用应用内存。
• 从你的代码逻辑来看：每次调用set_bulb_colour都会新建一个canvas元素，但只用它生成了base64格式的图片URL，之后这个canvas变量就随函数执行结束出了作用域，没有被任何全局变量或其他代码持有引用。理论上，JavaScript的垃圾回收器（GC）会在内存压力足够时自动回收这些无引用的Canvas对象。

为什么它们没立刻消失？ #

• 浏览器的垃圾回收不是实时触发的，它会等到内存占用达到一定阈值，或者浏览器处于空闲状态时才会启动清理。所以那些旧Canvas可能只是暂时待在内存里，还没轮到被回收。
• 另外，只要Safari DevTools处于打开状态且显示了这些Canvas元素，DevTools就会持有它们的引用，这会直接阻止GC回收它们。你可以试试关闭DevTools再重新打开，或者切换到其他标签页再切回来，大概率会看到旧的Canvas已经被清理了。

如何优化内存使用？ #

虽然GC最终会处理无引用的对象，但如果频繁切换灯泡颜色，短时间内创建大量Canvas还是可能造成临时内存占用过高。你可以通过复用Canvas对象来从根源解决这个问题：

// 把Canvas和上下文变量提到函数外，复用同一个对象
let bulbCanvas = null;
let bulbCtx = null;

function set_bulb_colour(img_id, rgb_colour) {
    const img = new Image();
    img.onload = function() {
        // 第一次调用时初始化Canvas，之后直接复用
        if (!bulbCanvas) {
            bulbCanvas = document.createElement('canvas');
            bulbCanvas.width = img.width;
            bulbCanvas.height = img.height;
            bulbCtx = bulbCanvas.getContext('2d');
        }
        
        // 先清空画布再重绘
        bulbCtx.clearRect(0, 0, bulbCanvas.width, bulbCanvas.height);
        bulbCtx.drawImage(img, 0, 0);
        
        const image_data = bulbCtx.getImageData(0, 0, bulbCanvas.width, bulbCanvas.height);
        for (let i = 0; i < image_data.data.length; i += 4) {
            // 替换黄色像素逻辑不变
            if (image_data.data[i + 3] !== 0 && image_data.data[i] > 200 && image_data.data[i + 2] < 100) {
                image_data.data[i] = rgb_colour[0];
                image_data.data[i + 1] = rgb_colour[1];
                image_data.data[i + 2] = rgb_colour[2];
            }
        }
        
        bulbCtx.putImageData(image_data, 0, 0);
        $(img_id).attr('src', bulbCanvas.toDataURL());
    }
    img.src = 'images/light_bulb.png';
}

这个改动的核心是只创建一次Canvas对象，每次切换颜色时直接清空画布并重绘，避免了频繁创建销毁Canvas带来的内存波动。

额外说明 #

你用toDataURL()生成图片URL的方式不需要额外清理——base64字符串是独立的，不会持有Canvas的引用。如果是用URL.createObjectURL()的话才需要调用URL.revokeObjectURL()释放资源，这里不用操心。

内容的提问来源于stack exchange，提问作者av4625