延迟加载 = 鱼 + 熊掌

发布日期:2021-07-09
门户网站的产品经理一般都会想在首页上内页上塞进去更多的内容,就像大妈总是想往你的碗里夹入更多菜;同时他们完全不理会这可能会严重影响页面的加载速度(就像大妈也完全不在意你的体重)。已经不能考证,是哪个聪明的程序员发明了延迟加载(Lazy-Load),用来对抗越来越魔幻化的产品经理的需求----既要多,又要快。

延迟加载是什么?

延迟加载是一种在页面加载时延迟非关键资源加载的技术。这些非关键资源是在需要的时候加载的。就图像而言,“非必要性”通常等同于“屏幕外”。如果您使用过Lighthouse或者36测测试过网站,那么您可能已经看到了“延迟加载屏幕外图像”测试项:
灯塔中延迟离屏图像审计的截图。
Lighthouse的性能审计之一是识别屏幕外的图像,这些图像统统应该延迟加载。
不管你是不是个程序员,如果有心的话,都会发现延迟加载的图像已经充斥在各种网站和应用程序中。延迟加载图像的形式大概是这样的:
  • 打开一个页面,往下拉;
  • 有时,您一个占位符(通常是个灰色的图片)出现;
  • 占位符图像突然被最终图像取代。
简单的说,图像延迟加载就是:它会在页面加载时加载轻量级的占位符图像而非所有真实图片,并在它们滚动到视口中时将其替换为延时加载的大图。
网站媒体的截图在浏览中,演示了惰性加载的行动。左边是模糊的占位符,右边是加载的资源。
一个图像延迟加载的例子。占位符图像将在页面加载时加载(左侧),当用户滚动到这个图像时,它才将在需要时被加载。
如果您不熟悉延迟加载,您可能想知道这种技术有多有用,它的好处是什么。继续往下读吧!

为什么延迟加载图像或视频而不是直接加载它们呢?

简单的说,因为这样会很浪费。打个比方,大妈们会在冬天把夏天的衣服收好,把冬天的衣服放到衣柜;而不是把所有的衣服都堆在衣柜。这样做的好处就是可以用很小的衣柜就满足你的真实需求。(当然,如果你家有个大衣柜就可以不用这样做的)这就是延时加载的精髓,在需要的时候才拿出来。
回到网站上,如果我们在用户打开网页的时候,就把所有的内容都加载完毕。这肯定会消耗很多网络数据传输时间,CPU解码和编译时间。但这其中很多工作,也许90%的用户都不会需要,甚至都不知道。所以如果采用一种聪明的节约的方法,在用户真正需要这些图片的时候再加载它们,岂不美哉?

实施延迟加载

有很多方法可以实现延迟加载,其实大部分的现代浏览器也都默认支持了延迟加载。
在现代浏览器中,使用简单的src标签和data-src标签就可以轻松搞定延迟加载。例如:

这段代码就可以轻松的搞定一个图片的加载。当然了,为了兼容那些不支持延迟加载的老式浏览器。您还得准备一些javascript代码。这些代码也可以轻松在github上找到。

结论

如果你的项目中,需要在页面上使用很多图片。作为一个成熟负责的程序员,你有义务使用延迟加载技术来提高页面资源的利用率,降低用户等待的时间。