懒加载

概述

随着 Web 的发展，我们看到发送给用户的资源数量和大小急剧增加。在 2011 年到 2019 年之间，桌面设备的平均资源重量从约 100KB 增加到约 400KB，而移动设备的平均资源重量从约 50KB 增加到约 350KB。而桌面设备的图片尺寸从约 250KB 增加到约 900KB，移动设备的图片尺寸则从约 100KB 增加到约 850KB。

解决此问题的方法之一是通过延迟加载对首次渲染不重要的资源，来缩短关键渲染路径的长度。一个实际的例子是，当您访问一个电子商务网站的主页时，其中包含指向购物车页面/部分的链接，在您导航到那里之前，购物车页面的任何资源（如 JavaScript、CSS 和图片）都不会被下载。

策略

延迟加载可以应用于多种资源，并可通过多种策略实现。

通用

代码分割

JavaScript、CSS 和 HTML 可以被分割成更小的块。这使得能够优先发送提供价值所需的最少代码，从而提高页面加载时间。其余部分可以按需加载。

• 入口点分割：按应用中的入口点分割代码
• 动态分割：在使用动态 import() 表达式的地方分割代码

JavaScript

脚本类型模块

任何带有 type="module" 的 script 标签都被视为JavaScript 模块，并且默认会被延迟加载。

CSS

默认情况下，CSS 被视为渲染阻塞资源，因此在 CSSOM 构建完成之前，浏览器不会渲染任何已处理的内容。CSS 必须精简，尽可能快速地交付，并且建议使用媒体类型和查询来解除渲染阻塞。

<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
<link href="print.css" rel="stylesheet" media="print" />

可以执行一些CSS 优化来实现这一点。

字体

默认情况下，字体请求会延迟到渲染树构建完成后才进行，这可能导致文本渲染延迟。

可以通过使用 <link rel="preload">、CSS font-display 描述符以及字体加载 API 来覆盖默认行为并预加载 Web 字体资源。

另请参阅：Element Link。

图片和 iframe

很多时候，网页包含许多图片，这些图片会消耗数据量并影响页面加载速度。其中大部分图片都处于屏幕外（非关键），需要用户进行交互，例如滚动，才能查看它们。

loading 属性

可以在 <img> 元素上使用 loading 属性，或者在 <iframe> 上使用 loading 属性，来指示浏览器延迟加载屏幕外的图片/iframe，直到用户滚动到它们附近。这使得非关键资源仅在需要时加载，从而可能加快初始页面加载速度并减少网络使用。

<img loading="lazy" src="image.jpg" alt="..." />
<iframe loading="lazy" src="video-player.html" title="..."></iframe>

当所有急切加载的内容都已加载时，会触发 load 事件。此时，即使在视觉视口中存在尚未加载的延迟加载的图片或 iframe，也是完全可能的（甚至很可能）的。

您可以通过检查其布尔值 complete 属性的值来确定给定的图片是否已完成加载。

Intersection Observer API

Intersection Observers 允许用户知道观察到的元素何时进入或退出浏览器的视口。

事件处理器

当浏览器兼容性至关重要时，有几种选择：

• Polyfill Intersection Observer
• 回退到 scroll、resize 或 orientation change 事件处理程序，以确定特定元素是否在视口中

规范

另见

• 渲染阻塞 CSS
• 浏览器级别的图片延迟加载