---

title: Image.onload垃圾回收
date: 2021-06-09 19:50:08
categories:
- 前端
tags:
- web
- 浏览器

如果通过 const img = new Image() 创建图像，则添加 onload 处理程序并设置 img.src, 将请求图像数据，并且尽管该图像未附加到DOM树也被调用
onload , 这种情况下:

何时以及如何垃圾收集该图像? JavaScript是否能够知道 onload 处理程序将被调用, 并且仅被调用一次, 以随后释放图像? JavaScript是否会通知是否未设置 img.src, 从而永远不会调用 onload 并可以立即释放img?

const img = new Image();
img.onload = function(){
    alert('Loaded!');
}
img.src = 'test.png';

页面中的JS代码通过 document.createElement("img") 创建了1000张图片 ( new Image()的工作方式相同 ), 附加了2个事件处理程序 (加载和错误) 并设置了src属性

加载所有图像后，JS尝试释放内存，以在上一个加载事件(=同步)中显式调用gc()，并立即将此图像的src设置为另一个URL。另外，将计时器设置为第二次尝试释放内存，因此稍后将以异步方式完成。

Chrome开发者工具中的“内存时间轴”显示，第一个GC会收集除最后一个GC外的所有图像。我认为这是因为无法加载最后一张图片，因为它正在加载新图片。
当发生第二个GC时，最后一个图像已经加载，并且也从内存中将其删除。

从这个实验中得出的结论是:

• 加载/错误事件处理程序被调用, 如果没有链接到图像则触发事件
• 图像加载过程完成(成功或失败)时，可以垃圾收集图像对象。