图像加载机制：揭秘浏览器何时机请求图片资源

浏览器在什么时候会去加载一张图片呢？当然是我们网页中有图片的时候。在平时的项目开发中，我们还常常会用图片进行日志上报，大概像下面这样：

const img = new Image();
img.src = 'https://example.com/image.png';

新建一个 Image，将其 src 赋值，浏览器便会发出一个网络请求。

答案是：不会。只需要增加一行代码，将 script 插入到 DOM 树中，便会触发网络请求：

const script = document.createElement('script');
script.src = 'https://example.com/script.js';
document.head.appendChild(script);

为什么呢？因为浏览器在遇到 script 标签时，会立即发起一个网络请求去加载脚本文件。这是为了确保脚本能够尽快执行，不会阻塞页面渲染。而图像则不同，浏览器不会立即加载它们，而是会等到页面渲染完成后再加载。

这是因为图像的加载可能会比较慢，特别是对于那些大尺寸、高分辨率的图片。如果浏览器在页面渲染过程中加载图像，可能会导致页面渲染速度变慢，甚至出现卡顿的情况。

那么，浏览器是如何知道何时加载图像的呢？

在 HTML 文档中，图像的加载是由 img 标签控制的。当浏览器遇到 img 标签时，会将图像的 URL 添加到一个队列中。然后，浏览器会根据一定的策略来决定何时加载队列中的图像。

影响浏览器加载图像策略的因素有很多，比如：

• 视口位置：浏览器会优先加载视口内的图像。
• 距离顶部：浏览器会优先加载距离顶部较近的图像。
• 图像大小：浏览器会优先加载较小的图像。
• 网络连接速度：浏览器会根据网络连接速度来调整加载图像的策略。

如果一张图像不在视口内，或者距离顶部较远，或者图像较大，或者网络连接速度较慢，那么浏览器可能会推迟加载这张图像。

延迟加载图像可以减少页面渲染时间，提高页面性能。但是，延迟加载图像也可能会导致页面出现空白区域。为了避免这种情况，我们可以使用懒加载技术。

懒加载技术是一种延迟加载图像的策略。懒加载技术会等到用户滚动到图像所在的位置时再加载图像。这样，就可以避免页面出现空白区域，同时也可以减少页面渲染时间。

我们可以使用 JavaScript 来实现懒加载技术。比如，我们可以使用以下代码来实现懒加载：

const images = document.querySelectorAll('img[data-src]');

images.forEach((image) => {
  image.addEventListener('load', () => {
    image.classList.remove('lazyload');
  });

  image.setAttribute('src', image.getAttribute('data-src'));
});

这段代码会为所有具有 data-src 属性的图像添加一个懒加载事件监听器。当图像加载完成后，事件监听器会将图像的 lazyload 类移除。这样，图像就会显示出来。

懒加载技术是一种非常有效的提高页面性能的方法。在实际开发中，我们可以使用懒加载技术来延迟加载页面上的图像，从而提高页面性能。

除了懒加载技术之外，我们还可以使用其他方法来优化图像加载速度，比如：

• 使用 CDN 来分发图像。
• 使用较小的图像尺寸。
• 使用图像压缩工具来减小图像大小。
• 将图像转换为 WebP 格式。

通过使用这些方法，我们可以有效地优化图像加载速度，从而提高页面性能和用户体验。