谷歌浏览器已经增加iframe嵌套框架内容的延迟加载功能可以提高性能
谷歌浏览器在最近发布的测试版里已支持iframe惰性加载,这种机制有助于降低浏览器负载和减少不必要的流量。
所谓惰性加载也就是延迟加载,网站开发者可向浏览器声明iframe框架内容是需要立即加载、延迟加载还是自动。
当设置为自动加载时则浏览器会根据使用量进行判断,对iframe嵌套框架内容在不同情况下作出不同的加载动作。
利用iframe框架对网页内容进行嵌套是个很老的技术,不过随着社交网络的发展,这种嵌套框架使用率竟然飙升。
例如在网页里直接嵌入 Facebook、Instagram、Twitter、YouTube 视频甚至可以嵌套来自Spotify提供的音乐。
目前在很多网页上都能看到这类嵌入框架内容,比如蓝点网发布带有视频的文章时就使用哔哩哔哩的iframe嵌套。
为此谷歌浏览器开发团队对这类嵌套内容进行优化,让用户使用社交网络浏览这些iframe框架内容时体验会更好。
谷歌浏览器为开发者提供的iframe框架加载项主要是延迟加载、立即加载和自动模式由浏览器决定是否立即加载。
其中立即加载主要适合那些不适合延迟加载的内容需要立即加载,延迟加载则针对那些不影响主要浏览的内容等。
例如在网页中嵌套社交网络动态类的内容,在用户没有滚动到对应的位置时就不需要立即加载反正用户也看不见。
待用户滚动到对应的位置时再加载即可,这样可以帮助浏览器节省2%~3%的数据量 , 并让页面加载时间快10秒。
<!-- Lazy-load an offscreen image when the user scrolls near it --> <!-- 图片类的延迟加载示例 --> <img src="unicorn.jpg" loading="lazy" alt="延迟加载"/> <!-- Load an image right away instead of lazy-loading --> <img src="unicorn.jpg" loading="eager" alt="立即加载"/> <!-- Browser decides whether or not to lazy-load the image --> <img src="unicorn.jpg" loading="auto" alt="自动加载"/> <!-- Lazy-load an offscreen iframe when the user scrolls near it --> <!-- iframe嵌套框架类的延迟加载示例--> <iframe src="example.html" loading="lazy">延迟加载</iframe> <iframe src="example.html" loading="eager">立即加载</iframe> <iframe src="example.html" loading="auto">自动加载</iframe>