大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

前言

图像的标准化延迟加载策略通过 loading 属性已经集成到 Chrome 76，Firefox等诸多浏览器，比如下面的浏览器支持图。

目前，iframe 的浏览器级延迟加载也已标准化，并且在 Chrome 和基于 Chromium 的浏览器中也受支持。

<iframe 
        src="https://feadvance.example.com"
        loading="lazy"
        // 指定浏览器是应立即加载 iframe 还是推迟加载iframe
        // 直到满足某些条件
        width="600"
        height="400">
</iframe>

iframe 延迟加载屏幕外 iframe 的内容，直到用户滚到附近。这样可以有效节省数据，加快页面其他部分的加载速度，并减少内存使用。

1.为什么延迟加载 iframe？

第三方嵌入涵盖了广泛的用例，从视频播放器到社交媒体帖子，再到广告。 通常此内容不会立即显示在用户的视口中。 只有当用户向下滚动页面时才会看到它。 尽管如此，用户还是要支付下载数据，即使用户不滚动到它也是如此，而这本质上是不合理的！

根据 Chrome 对 Data Saver 用户自动延迟加载屏幕外 iframe 的研究，延迟加载 iframe 可以节省 2-3% 的数据，中位数减少 1-2% 的首次内容绘制，以及 2% 的首次输入延迟（ FID) 。

此外，延迟加载屏幕外 iframe 可以为 LCP（Largest Contentful Paint） 指标带来明显好处。 由于 iframe 通常需要大量带宽才能加载所有子资源，延迟加载屏幕外 iframe 可以减少网络受限设备上的带宽争用，留出更多带宽来加载有助于页面 LCP 的关键资源。

LCP是衡量页面速度的指标，它告诉您加载网页的主要内容需要多长时间，是用户体验不可或缺的一部分。如果 LCP 很差，可能会遇到更高的网站跳出率，影响站点整体排名。 由于 Google 的 Core Web Vitals 更新，LCP 正在成为 SERP 上排名的一个更重要的因素。

LCP 仅适用于首屏的主要内容。这包括无需用户向下滚动即可显示的任何图像、视频或文本块。在注意任何问题区域时，请记住这一点。

2.iframe 的内置延迟加载如何工作？

loading 属性允许浏览器延迟加载离屏 iframe 和图像，直到用户滚动到附近。 loading属性目前支持两个值：

• lazy：延迟加载
• eager: 立即加载

在 iframe 上使用 loading 属性的工作原理如下：

<!-- 延迟加载-->
<iframe src="https://example.feadvance.com"
        loading="lazy"
        width="600"
        height="400">
 </iframe>
<!-- 立即加载-->
<iframe src="https://example.feadvance.com"
        width="600"
        height="400">
 </iframe>
<!-- 或者使用 loading="eager" 选择退出自动精简模式下的延迟加载-->
<iframe src="https://example.feadvance.com"
        loading="eager"
        width="600"
        height="400">
</iframe>

注意：不指定loading属性表示显式预先加载资源，除了精简模式用户，Chrome 将使用 auto 值来决定是否应该延迟加载。

如果需要通过 JavaScript 动态创建 iframe，也支持在元素上设置 iframe.loading = 'lazy'：

function loadIframe() {
    const iframe = document.createElement('iframe');
    iframe.id = 'testframe';
    iframe.name = 'testframe';
    iframe.loading = 'lazy';
    // 延迟加载
    iframe.src = 'http://www.baidu.com/';
    const fn = function() {
        alert('iframe loaded ok');
    };
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', fn);
    } else {
        iframe.onload = fn;
    }
    document.body.insertBefore(iframe, document.body.firstChild);
}

3.iframe 特定的延迟加载行为

loading 属性对 iframe 的影响不同于图像，具体取决于 iframe 是否隐藏。 Chrome 使用以下标准来确定 iframe 是否隐藏：

• iframe 的宽度和高度为 4px 或更小
• display: none 或 visibility: hidden
• 使用负 X 或 Y 定位将 iframe 放置在屏幕外
• 此标准适用于 loading=lazy 和 loading=auto

如果 iframe 满足这些条件中的任何一个，Chrome 就会认为它是隐藏的，并且在大多数情况下不会延迟加载它。 未隐藏的 iframe 只有在加载距离处于阈值内时才会加载。

注意：Chrome 为仍在获取的延迟加载的 iframe 显示了一个占位符。

4.延迟加载收益

下面是Chrome团队给出的延迟加载YouTube视频嵌入的示例：

在初始页面加载时延迟加载 YouTube 视频嵌入，可以节省 ~500KB的资源：

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

5.可以跨浏览器延迟加载 iframe 吗？

iframe 延迟加载可以作为渐进式增强应用。 支持 loading=lazy 的浏览器将延迟加载 iframe，而在尚不支持它的浏览器中将安全地忽略 loading 属性。

也可以使用 lazysizes JavaScript 库延迟加载屏幕外 iframe。但是需要满足以下条件：

• 需要比标准延迟加载当前提供的更多的自定义延迟加载阈值
• 希望为用户提供跨浏览器一致的 iframe 延迟加载体验

<script src="lazysizes.min.js" async></script>
<iframe 
    frameborder="0"
	  class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

使用以下模式来检测延迟加载，并在不可用时获取延迟加载：

<iframe frameborder="0"
	  class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//youku.com/v/2323">
</iframe>
<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    // 是否支持loading属性
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');
    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });
  } else {
    // 动态导入 LazySizes 库
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

lazysizes库：用于图像（响应式和正常）、iframe 等的高性能和 SEO 友好的延迟加载器，可检测通过用户交互、CSS 或 JavaScript 触发的任何可见性更改，无需配置。

6.本文总结

本文主要和大家介绍iframe的延迟加载策略，给出延迟加载 iframe 的标准化支持可以有效提高网页性能。同时，对什么是延迟加载、延迟加载怎么用、延迟加载收益做了一个简单的介绍。因篇幅有限，文章没有过多展开。文末的参考资料提供了优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://web.dev/iframe-lazy-loading/

https://github.com/aFarkas/lazysizes