jQuery Lazy Loading是否有任何真正的性能提升？

Question

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

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

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

Answer 1

这完全取决于“性能”你的意思以及如何使用延迟加载。

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

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

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

Answer 2

我可以用延迟加载来描述我的体验，这种体验适合我需要隐藏数百个图像，直到它们滚动到。

当屏幕上只有5张左右的图像时，延迟加载将不会执行任何操作，因此无法获得。但是在正常加载的情况下添加到单个页面的图像越多，我就可以看到我的便宜平板电脑在尝试加载那么多内容以及渲染屏幕上的内容时。随着延迟加载，我的平板电脑仍然花时间加载屏幕上的内容，但是当它完成时，它不再是口吃加载任何东西。因此，只需延迟加载，用户就可以改善体验。

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