混合延迟加载：逐步迁移到本机延迟加载

Desknumber

本机延迟加载即将登陆网络。由于它不依赖于 JavaScript，因此它将彻底改变我们今天延迟加载内容的方式，使开发人员更容易延迟加载图像和 iframe。但这不是我们可以填充的功能，并且需要一些时间才能在所有浏览器上使用。在本文中，您将了解它的工作原理以及如何通过混合延迟加载

逐步将 JavaScript 驱动的延迟加载替换为其本机替代方案。在过去的几周里，您可能听说过或读到过有关本机延迟加载的内容，该功能将在未来几个月内出现在 Chromium 75 中。“是的，好消息，但我们必须等到 电子邮件营销列表 所有浏览器都支持它。”如果这是您首先想到的，请继续阅读。我会尝试让你相信相反的观点。让我们首先比较一下本机延迟加载和优秀的 JavaScript 驱动加载。

本机与 JavaScript 驱动的延迟加载
延迟加载是一种通过延迟加载非首屏内容来最大化首屏图像和 iframe（有时还有视频）的渲染速度来提高网站或 Web 应用程序性能的方法。



JAVASCRIPT 驱动的延迟加载
为了延迟加载图像或 iframe，一种非常常见的做法是通过用src类似的数据属性替换正确的属性来标记它们data-src，然后依靠 JavaScript 解决方案来检测图像/iframe 何时接近可见网站的一部分（通常是因为用户向下滚动）并将数据属性复制到正确的属性中，然后触发其内容的延迟加载。

如果您网站的图像在页面登陆时一次性下载完毕，而没有延迟加载，您可以在网站中启用（如果支持）本机延迟加载，就像添加 HTML 属性一样简单。该loading属性告诉浏览器哪些图像需要立即加载，哪些图像可以在用户向下滚动时延迟下载。相同的属性可以应用于 iframe。

为了告诉浏览器特定图像很重要，以便他们可以尽快加载它，您必须在标签loading="eager"上添加该属性img。最佳实践是对主图像执行此操作 - 通常是针对将在首屏显示的图像。