不少网站都会在网页当中埋入延迟加载的JavaScript代码,以便降低首次加载的图片数量,加快网页首次呈现时间。Google Chrome已预定在75版本当中原生支持这项功能并自动启动,包含lazy image loading和lazy iframe loading。
![fa29d76dc005b32adf9f54e4baaf46cc.png](https://i-blog.csdnimg.cn/blog_migrate/0823516ad779d1661536d1086bd30956.jpeg)
网页结构越来越复杂,需要加载的物件也越来越多,该如何降低首次连入网页的延迟,对于使用者体验影响不小。目前跨网页浏览器的做法为埋入1小段JavaScript代码,延后加载显示视区以外的物件,等到使用者滑动页面,接近视区时才会向服务器发出请求并下载,此种做法可有效降低首次进入网页的加载时间。
![93096dc67971fbe7a13dd0b1511b40f7.png](https://i-blog.csdnimg.cn/blog_migrate/cb7942d343f9076de041e87aa567044f.jpeg)
▲lazy loading不仅让网页显示时间缩短,也可以减少一开始的数据传输量。
Google Chrome网页浏览器将从75版本号开始,原生支持、里的srcset、
loading="lazy"就如同现在的处理方式,当使用者卷动网页至接近视区时才会加载,loading="eager"则是要求浏览器立即下载加载,loading="auto"则是交由网页浏览器自行决定加载时机点。由于Google Chrome预计是第一个导入原生lazy loading的网页浏览器,若是网页开发者欲达成跨浏览器兼容性,则必须额外加入判断语法if('loading' in HTMLImageElement.prototype),在else{}段落填入原本用以lazy loading的JavaScript。
![1f3c96f9ca9887193fae5a387a677194.png](https://i-blog.csdnimg.cn/blog_migrate/1dec3d755914f2f75018771f24ef7b85.jpeg)
▲Google Chome桌面版73版已加入lazy image loading和lazy iframe loading实验性功能。
lazy loading还可以降低刚开始加载网页的流量,因此Google Chrome这项功能一开始其实是从Android版本进行试验,如今桌面版本也放在chrome://flags实验功能菜单当中,使用者可自行选择是否先行开启该功能。另外一家Mozilla Firefox目前仅支持新分页内容的延迟加载,当使用者确实点击新分页使其显示在最上层,才会开始加载该分页内容,至于是否原生支持图片或是iframe的延迟加载,目前并未有任何风声传出。