网页原生延迟加载

Chrome 的一项新功能被称为“Blink LazyLoad”，旨在通过延迟加载页面下方折叠的图像和第三方<iframe>来显著提高性能。

这个大胆实验的目标是提高出现在用户视窗内（也称为页面上方折叠）的内容的整体渲染速度，以及减少网络数据和内存使用量。✨

👨‍🏫 它将如何运作？

人们认为，暂时延迟不太重要的内容将大大提高整体感知性能。

如果这个提案成功，则将在页面的加载阶段运行自动优化。

• 将分析图像和 iFrame 以判断重要性。
• 如果它们被认为是非必需的，它们将被延迟或根本不加载。
  • 延迟的项目只会在用户滚动到附近区域时加载。
  • 将在获取图像之前使用一个空白占位符图像。

公共提案 有一些有趣的细节

• LazyLoad 由两种不同的机制组成：LazyImages 和 LazyFrames。
• 当用户滚动到给定像素数内时，将加载延迟的图像和 iFrame。 像素数将根据三个因素而变化
  • 如果是 iframe 或图像
  • 启用或禁用数据节省
  • “有效连接类型“
• 一旦浏览器确定图像位于页面下方折叠，它将发出一个范围请求 来获取图像的前几个字节以确定其尺寸。 然后将尺寸用于创建占位符。

the loading 属性 将允许作者指定哪些元素应该或不应该延迟加载。 以下示例表明此内容是非必需的

<iframe src="ads.html" loading="lazy"></iframe>

有三个选项

• on – 表示强烈倾向于延迟获取，直到内容可查看。
• off – 立即获取此资源，无论是否可查看。
• auto – 让浏览器决定（与根本不使用loading 属性的效果相同）。

🔒 实现安全的延迟加载策略

功能策略：LazyLoad 将提供一种机制，允许作者强制在每个域的基础上选择加入或选择退出 LazyLoad 功能（类似于 内容安全策略 的工作方式）。 有一个尚未合并的 拉取请求描述了它可能的工作方式。

🤔 向后兼容性如何？

目前，很难说这些页面优化是否会导致现有网站的兼容性问题。

第三方 iframe 用于大量的目的，例如广告、分析或身份验证。 延迟或不加载重要的 iframe（因为用户从不滚动到那么远）可能会产生戏剧性的不可预见的影响。 依赖于图像或 iframe 已加载并在onLoad 触发时存在的页面也可能面临重大问题。

这些自动优化可以静默高效地提高 Chrome 的渲染速度，而不会对用户造成任何显著问题。 负责该提案的 Google 团队正在通过 Chrome 记录的指标仔细测量 LazyLoad 效果的性能特征。

💻 在 Chrome 中启用延迟加载

在撰写本文时，原生延迟加载仅在Chrome Canary 中可用，在两个必需的标志后面

• chrome://flags/#enable-lazy-image-loading
• chrome://flags/#enable-lazy-frame-loading

可以通过在 Chrome 浏览器中导航到chrome://flags 来启用标志。

📚 参考和资料

• LazyLoad 公共提案
• HTML Living Standard 拉取请求 – lazyload 属性
• HTTP 范围请求
• Chrome 平台状态 – 功能策略：lazyload
• LazyLoad Frames 已合并到 Chromium（发布后几分钟）。
• Calibre 性能监控

浏览器支持

👋 最后

当我们开始欢迎下一个十亿用户进入网络时，令人谦卑的是，我们才刚刚开始了解浏览器、连接性和用户体验的复杂性。