在网络上加载图像 - 我错过了什么？

Question

我正在尝试围绕在网络上加载图像建立一个心智模型。我的主要问题是 - 图像是同步加载、并行加载还是以任何其他方式加载？

我为什么要问这个？因为在网络上加载图像的方式中，有两个概念在我脑海中发生冲突。

所以，有一个东西叫做

lazy loading

。据我了解，它假设图像是同步加载的，因为它的目的是减少我们页面的初始加载时间。因此，它假定必须在浏览器开始呈现我们页面的组件之前加载图像。

还有一个东西叫

layout shift

。同样，据我所知，它假设图像是并行加载的，因此浏览器在呈现我们页面的组件时可能不知道它们的实际纵横比（当然，如果我们没有明确定义宽度/高度或我们图像的纵横比）。

您可能会注意到，我对这两个概念有一些误解，无法弄清楚。

Answer 1

你的问题很好，这里有很多东西要解压。让我们从基础开始。

加载网页时，它以线性方式加载。这意味着每次加载一个资源（例如图像、脚本和样式表）。但是，资源的加载可以并行发生，这意味着可以同时加载多个资源。这是由浏览器和服务器控制的，并且会受到各种因素的影响，例如用户的互联网速度和服务器的容量。

现在，让我们谈谈延迟加载。延迟加载是一种用于通过仅在需要时加载图像来缩短页面加载时间的技术。这意味着图像不会与页面的其余部分同步加载，而是在用户向下滚动页面时异步加载。这种技术可以大大缩短页面的初始加载时间，因为浏览器不必一次加载所有图像。

Layout shift 是一个与延迟加载有关的概念，但它更多地与图像在页面上的显示方式有关。当加载图像且未定义其宽高比时，浏览器不知道为图像分配多少空间。这可能会导致所谓的“布局偏移”，即页面布局会随着图像的加载而发生变化。这可能会让用户感到沮丧，因为它会导致按钮和其他元素意外移动。

为避免布局偏移，建议在 HTML 或 CSS 中定义图像的宽度和高度。这允许浏览器为图像分配适当的空间量，甚至在加载图像之前。这在使用延迟加载时尤为重要，因为在用户向下滚动到图像之前可能不会加载图像。

总而言之，网络上的图像以线性方式加载，但可以并行加载。延迟加载是一种用于通过仅在需要时加载图像来缩短页面加载时间的技术。在未定义宽高比的情况下加载图像时可能会发生布局偏移，从而导致页面布局发生意外更改。定义图像的宽度和高度有助于防止布局偏移并改善整体用户体验。