jQuery懒加载是否有实际的性能提升?

3

jQuery Lazy Loader实现的是图片懒加载,即延迟加载图片直到它们在浏览器中可见。据称这可以使网站感觉更加"敏捷",并且当用户向下滚动页面时,图片会优雅地淡入。

Mashable 以使用此技术而闻名(虽然我刚刚检查了一下,似乎他们不再使用此技术了)。

使用 jQuery 懒加载是否有任何实际的性能提升,还是只是让用户感觉网站加载得更快?


2
投票关闭,因为这不是一个WordPress问题,尽管这是一个很好的问题。 - John P Bloch
抱歉,我应该说明一下,我的应用程序是针对WordPress的,使用这个插件:https://wordpress.org/extend/plugins/jquery-image-lazy-loading/。 - Evan Wondrasek
4
我认为你可以在官方插件网站的大红框中找到你的答案 :) - One Trick Pony
@John:这个问题应该迁移到哪里?Pro Webmasters 还是只在 Stack Overflow 上?我猜需要由管理员进行迁移?但确实是一个有趣的问题 - 希望能减少对这个烦人的脚本的使用 :-) - Jan Fabry
@Jan:我猜是Stack Overflow。在Pro Webmasters上有20个标记为“jQuery”的问题,但在Stack Overflow上有65k个。如果你想要更快的响应,可以去SO。如果它属于PW,它会很快被转移过去的。 - John P Bloch
显示剩余3条评论
2个回答

4
这完全取决于"性能"的含义以及如何使用惰性加载。
如果你只是使用懒加载来加载你本来就会加载的同样的图片,那么相同数量的比特流会流过网络,但实际上从“服务器到客户端”的角度来看,打包和IO成本更高,因此它实际上会在"性能"方面造成负担。它将这样做是为了使用户受益,用户可能比预期更快地开始使用部分内容,从而提高了用户感知,这也是"性能"的一个方面。
如果你使用惰性加载来区分要下载的数据或图片,以便只下载消费者想要的内容,那么你将获得真正的性能优势,因为不会流式传输不需要的内容。
“改进”有多大? 是否“值得”?这非常主观,结果因人而异

1
我可以描述我使用的懒加载经验,它适合我的需求,可以隐藏数百张图片,直到它们被滚动到屏幕上。
当只有5张或更少的图片离开屏幕时,懒加载不会做任何事情,因此没有任何收益。但是,如果在单个页面上添加了更多的图像,则使用常规加载,我真的可以看到我的廉价平板电脑努力加载那么多内容以及呈现屏幕上的内容。启用懒加载后,我的平板电脑仍然需要时间加载屏幕上的内容,但是当这一步完成后,它就不再尝试加载任何东西而导致卡顿。因此,仅使用懒加载,我的用户体验得到了改善。
我一直在使用lazySizes,您需要做出的一个决定是是否承诺它所需的内容。所有我的<img>都使用data-src属性而不是src,这使其依赖于用户启用javascript。如果这对您不是一个选项,我相信还有其他备选方案,我只是不知道它们是什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接