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

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

澳门葡萄京官方网站 1

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

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

1.下载并安装 Google Chrome Canary

什么是延迟加载?

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

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

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

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

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

  • 用户访问一个页面,并开始滚动阅读内容
  • 在某个时刻,将占位符图像滚动到视口中
  • 该占位符图像瞬间替换为最终图像
  • 打印”或“网页另存为”功能,理想情况下需要完全渲染页面才能打印或保存

  • 对于网络连接时断时续的环境,在向下滚动页面时图像/iframe
    可能会无法加载。

澳门葡萄京官方网站 3

对于不希望他们的页面被延迟加载的站长可能有一种方法可以避免它。谷歌目前正在与万维网联盟(W3C)合作开发一个
HTML 标签,该标签会告诉 Chrome
和其他内置支持延迟加载的浏览器,不要延迟/延迟/自动选择 加载指定的元素。

更多关于 Chrome
内置延迟加载功能的技术实现细节请查看 。

(文/开源中国)    

相关进展

(文/开源中国)