大约半年前,开源中国曾报道过,谷歌浏览器 Chrome
将内置延迟加载机制,以提升页面的加载速度。现在,谷歌已经在 Chrome Canary
通道的最新版本提供了该项功能,以用于测试。

谷歌工程经理 Addy Osmani
表示,计划于今年5月份发布的
澳门新葡亰游戏网址,Chrome 75
稳定版默认启用网页延迟加载(lazy
loading)功能。此前开源中国报道过,Chrome
内置的延迟加载功能已在 canary
通道提供,到现在历经八个月的开发,有望在稳定版中正式启用。

在 Chrome 中启用延迟加载功能的方法是:

澳门新葡亰游戏网址 1

1.下载并安装 Google Chrome Canary

如上图所示,自 Chrome 75
起,将原生支持图片的延迟加载,在代码中编写 <img
loading=”lazy”>,即支持滚动到视口再加载图片。

2.然后在地址栏输入 chrome://flags,搜索 #enable-lazy-image-loading
和 #enable-lazy-frame-loading,然后开启这两个选项,重启浏览器后,Chrome
便会开始启用延迟加载功能。澳门新葡亰游戏网址 2

什么是延迟加载?

这将改善用户体验,提升页面加载速度,并且无需快速连接即可供用户访问,这是一个很大的改进。但值得注意的是,此功能目前尚未正式提供。对于那些不熟悉延迟加载机制的人来说,这是一种浏览器不加载不在视口中的图像的技术。Chrome
只有在靠近视口边框时才会加载图片。

延迟加载是一种在加载页面时,延迟加载非关键资源的方法,
而这些非关键资源则在需要时才进行加载(如文本、图像和视频等)。

但谷歌必须要解决许多问题,才能在 Chrome
中实现内置延迟加载功能。这里有两个特别复杂的场景是:

谷歌工程师报告说,使用该机制后,页面加载速度的提升从
18% 到 35%
不等,具体取决于底层网络。你应该也见过延迟加载的实际应用,其过程大致如下:

网站地图xml地图