什么是惰性加载？

什么是惰性加载？

延迟加载是一种等到需要时再加载网页的某些部分（尤其是图像）的技术。浏览器不会一次加载所有内容（称为“急切”加载），而是在用户以需要某资源的方式进行交互之前不请求该资源。如果实施得当，延迟加载可以加快页面加载时间。

这种类型的加载被称为“延迟”，因为它鼓励网络浏览器拖延。当显示延迟加载网页时，浏览器本质上会说，“我将等待真正需要的时候再加载这些图像。” 当显示一个急切加载的网页时，浏览器采取相反的态度：“我会马上处理一切！” 虽然拖延有时在现实世界中带有负面含义，但在这种情况下，它通常更有效。

例如，一篇博客文章可能在页面顶部有一张图片，在底部附近有一张图表。阅读博客文章的人可能会在几分钟内到达文本底部，因此浏览器会等到读者滚动到该部分时再加载图表。这样，页面一开始加载得更快，因为浏览器加载的是一张图片而不是两张。

延迟加载图像如何运作？

用户导航通常延迟加载图像的触发点。特别是，当用户在页面上向下滚动时，这会告诉浏览器加载出现在那里的图像。

网页加载时，用户看到的部分称为“首屏”，而用户尚未看到的部分称为“非首屏”。*首屏图片需要立即加载， 否则会影响用户体验。但是用户在向下滚动之前不会看到非首屏图片。因此，非首屏图片可以使用延迟加载。

*“fold”（对折线）是什么意思？“首屏”和“非首屏”起源于报纸版面。报纸通常水平对折，前半部分（对折线上方的区域）是读者首先看到的。当该术语应用于 Web 布局时，“对折线”是用户屏幕的底部。

如何实施图像的延迟加载

实现延迟加载的一种方法是在图像标签中使用 HTML 属性加载。添加 loading="lazy"，如下例所示，告诉浏览器等到用户滚动靠近它时再加载图像：

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

Web 开发人员还可以使用编程框架来实施更复杂的延迟加载。Angular 通常用于此目的。JavaScript 库 React 也支持延迟加载。

Cloudflare Mirage 是另一种实现延迟加载的方式。除了自动调整图像大小外，Mirage 还充当延迟加载器，仅按需加载图像。Cloudflare Mirage 功能适用于 Pro 和 Business 自助服务方案的 Cloudflare 客户，以及 Enterprise 客户。

还有哪些页面资源可以使用延迟加载？

• JavaScript：JavaScript 被称为渲染阻塞资源——意味着浏览器在加载 JavaScript 代码之前无法渲染页面。JavaScript 代码可以分成更小的模块，在需要时加载，从而减少需要执行 JavaScript 的页面的加载时间（了解更多）。
• CSS：CSS 也是一种渲染阻塞资源。将 CSS 文件拆分为仅在必要时加载的多个文件有助于减少阻止浏览器呈现页面其余部分的时间。非阻塞 CSS 文件应该有自己的链接，并添加一个 media 属性来告诉浏览器何时加载它们（了解更多）。
• iframe：iframe 用于将来自外部源的内容嵌入到网页中。iframe 标记可以针对图像包含与上面所述相同的 HTML loading 属性。

延迟加载有哪些好处？

更快的页面加载：在其他条件相同的情况下，文件较小的网页加载速度更快。使用延迟加载，网页开始时会小于其完整大小，因此加载速度更快。快速的 Web 性能有很多好处，包括更好的 SEO、更高的转化率和更好的用户体验。

没有不必要的内容：假设页面加载了多个非首屏图像，但用户在向下滚动之前退出了页面。在这种情况下，用于传递图像的带宽以及浏览器请求和渲染图像所花费的时间基本上都被浪费了。相反，延迟加载确保这些图像仅在必要时加载。这节省了时间和处理能力，并且可以为网站所有者节省资金，因为使用的带宽更少。

延迟加载有哪些缺点？

用户请求资源的速度可能比预期的快：例如，如果用户快速向下滚动页面，他们可能需要等待图片的加载。这可能对用户体验产生负面影响。

与服务器的额外通信：当用户与页面交互时，浏览器可能不得不向网站的服务器发送多个内容请求，而不是一次请求所有页面内容。使用内容分发网络 (CDN) 可以最大限度地减少这种潜在的缺陷，因为图像由 CDN 缓存，并且浏览器不必一直向源服务器发送请求来获取它们。

浏览器需要处理额外代码：如果开发人员在网页中添加几行 JavaScript 来告诉浏览器如何延迟加载页面资源，这会增加浏览器必须加载和处理的代码量。如果效率低下，这种轻微的额外加载和处理时间可能会超过延迟加载所节省的时间。

什么是急切加载？

急切加载是同时或尽快加载所有网页资源。某些使用急切加载的应用程序可能会显示“正在加载”屏幕。复杂、代码量大的 Web 应用程序（例如在线游戏）可能更喜欢使用预加载。

开发人员还可以如何提高网页的速度？

许多因素会影响 Web 性能，但以下三个步骤是使网站速度更快的良好起点：

1. 使用 CDN：当网络内容被缓存在 CDN 中时，无论是否使用延迟加载，与源服务器的通信都被保持在最低限度。CDN 还能更快地将内容传递给用户，因为它们通常比源服务器更接近用户。
2. 优化图像：即使使用延迟加载，过大的图像也会影响性能。尽可能减少图像文件大小有助于确保图像快速加载。
3. 极简化代码：极简化是在不改变其功能的情况下从 CSS 和 JavaScript 代码中删除所有不必要字符的过程。这包括删除空格、注释和分号。极简化减少了代码文件的大小，提高了加载速度。

查看提高网页性能的更多方法：提高网站速度的技巧