new Image() 预加载 为什么比 <img>直接加载要好？

正文

请到「今天看啥」查看全文

「关键点是」 ：通过 new Image() 加载图片会提前发起请求，将图片缓存到浏览器中，这意味着你可以在用户滚动或需要展示图片时，直接从缓存加载，而不需要重新请求网络资源。这个过程是 「异步」 的。

2. 「浏览器的资源管理和缓存」

• 「图片预加载的缓存」 ： 当你通过 new Image() 加载图片时，图片会被缓存在浏览器的内存中（通常是浏览器的资源缓存），因此如果图片已经被加载过，后续使用该图片时会直接从缓存读取，而不需要重新请求网络资源。

  而如果你直接用 标签来加载图片，浏览器同样会请求并缓存图片，但如果图片在初次加载时不可见（比如在页面下方），用户滚动到该位置时，可能会再次触发网络请求，尤其是在使用懒加载（lazy load）等技术时。如果图片已经预加载过，浏览器就可以从缓存中直接加载，避免了再次请求。

3. 「避免页面阻塞」

• 「直接使用 」 ：当浏览器在解析页面时遇到 标签，会立即发起网络请求来加载图片。如果图片资源很大或者服务器响应很慢，浏览器可能需要等待这些资源加载完成，才能继续渲染其他部分。这会导致页面的 「渲染阻塞」 ，即页面内容渲染较慢，特别是在图片多的情况下。
• 「使用 new Image() 预加载」 ：通过 new Image() 预加载图片，可以避免渲染时对页面的阻塞。浏览器在后台加载图片，直到需要展示图片时，图片已经准备好了，这样页面展示可以更快，用户体验也更好。

4. 「适用场景」

• 「直接 标签加载」 ：适用于图片较少且页面上几乎所有图片都需要立即展示的场景。例如，单一图片展示的页面。
• 「

请到「今天看啥」查看全文