H5 图片系列—new Image()加载图片是否会有缓存，从而img标签获取同一数据源显示时使用该缓存数据？

是的，new Image() 在加载图片时，会利用浏览器的缓存机制。如果图片的 src 地址相同，浏览器会尝试从缓存中加载图片，而不是重新从网络请求。这是浏览器默认的行为，不会重复下载相同的图片，从而提高页面加载速度。

1.缓存机制

1.浏览器缓存：

a.当 img.src = imageUrl 被设置时，浏览器会尝试从缓存中查找这个图片的 URL。
b.如果缓存中有该图片，浏览器直接从缓存中加载图片，而不会再次发起网络请求。
c.如果没有缓存，则会发起网络请求下载该图片。

2.new Image() 与缓存：

a.new Image()创建的图像对象与 <img>标签一样，也会遵循浏览器的缓存策略。
b.也就是说，当你通过 new Image() 加载一个图片时，如果该图片的 URL 已经在浏览器缓存中，后续再次加载相同图片时会直接从缓存中获取。

2.缓存的相关细节

• 缓存控制：图片的缓存行为是由服务器设置的 HTTP 缓存头（如 Cache-Control）控制的。如果服务器响应中设置了合适的缓存头，浏览器会根据这些头信息来判断是否从缓存中加载图片。
  比如，Cache-Control: max-age=3600 告诉浏览器缓存图片 1 小时，期间不会重新请求。

• 缓存验证：如果服务器端设置了合适的缓存策略，浏览器会定期通过发起 If-Modified-Since 请求来验证图片是否更新，如果没有更新，浏览器直接从缓存中加载图片。

示例场景

假设你加载了一个图片，并使用new Image()：