jQuery 延迟加载是否有任何真正的性能提升？

Question

jQuery Lazy Loader 与预加载图像相反 - 它延迟加载图像直到它们在浏览器中可见。这声称可以让网站感觉“更快捷”，并且当用户向下滚动页面时，图像会优雅地淡入。

Mashable 以使用这种技术而闻名（虽然我刚刚检查过，但似乎他们不再这样做了）。

使用 jQuery 惰性加载器是否有任何实际的性能提升，或者它只是让用户感知网站加载速度更快？

Answer 1

这完全取决于您所说的“性能”是什么意思以及如何使用延迟加载。

如果您只是使用延迟加载来加载相同的图像，否则会加载相同数量的比特流，但从“服务器到客户端”的角度来看，打包和 IO 的成本确实更高，它实际上以“性能”为代价。这将使 用户 受益，他们可能确实比其他人更早开始消费部分内容，因此 用户感知 得到改善，这也是“性能”。

如果您使用延迟加载来区分正在下载的数据或图像，以便您只能提供消费者想要的内容，那么您将获得真正的性能奖励，因为您不会流式传输不需要的内容。

多少“改进”？这值得么”？嗯，这是非常主观的，您的里程可能会有所不同。

Answer 2

我可以描述一下我的延迟加载体验，这适合我隐藏数百张图像直到它们被滚动到的需要。

当屏幕外只有 5 张左右的图像时，延迟加载将不会做任何事情，因此在那里没有任何收获。但是，在正常加载的情况下，添加到单个页面的图像越多，我真的可以看到我的廉价平板电脑在尝试加载那么多内容并渲染屏幕上的内容的同时尝试加载。开启延迟加载后，我的平板电脑仍然会花时间加载屏幕上的内容，但完成后，它不再会因为加载任何内容而结结巴巴。因此，只需延迟加载，对于我（用户）来说，体验就得到了改善。

我一直在使用lazySizes，您需要做出的一个决定是是否承诺它所要求的。我所有的<img> 都使用data-src 属性而不是src 使其依赖于启用了javascript 的用户。如果这不是您的选择，我确定有备用选项，我只是不知道它们。