延迟加载

随着网页的发展，我们看到了发送给用户的资源数量和大小的巨大增长。在 2011 年到 2019 年之间，桌面端的资源中位数重量从~100KB增长到~400KB，移动端从~50KB增长到~350KB。而桌面端的图片大小从~250KB增长到~900KB，移动端从~100KB增长到~850KB。

我们可以用来解决这个问题的方法之一是，通过延迟加载对首次渲染不重要的资源来缩短关键渲染路径长度。一个实际的例子是，当你进入一个电子商务网站的首页，有一个指向购物车页面/部分的链接，但在你导航到那里之前，不会下载任何购物车页面的资源（如 JavaScript、CSS 和图片）。

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

代码拆分

JavaScript、CSS 和 HTML 可以拆分成更小的块。这样就可以在最开始发送提供价值所需的最小代码，提高页面加载速度。其余代码可以按需加载。

• 入口点拆分：根据应用程序中的入口点（多个）拆分代码
• 动态拆分：将使用动态 import()表达式的代码拆分

脚本类型模块

任何具有type="module"属性的脚本标签都被视为JavaScript 模块，默认情况下会被延迟加载。

默认情况下，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覆盖默认行为，并预加载网页字体资源。

另请参阅：链接元素。

网页通常包含许多图片，这些图片会影响数据使用量和页面加载速度。大多数图片都在屏幕外（非关键），需要用户交互，如滚动才能查看。

加载属性

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

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

当急切加载的内容全部加载完毕后，load 事件就会触发。此时，有可能（甚至很可能）可视视窗内存在一些尚未加载的延迟加载图片或 iframe。

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

交叉观察者 API

交叉观察者允许用户知道观察到的元素何时进入或退出浏览器的视窗。

事件处理程序

当浏览器兼容性至关重要时，有一些选择

• 交叉观察者 polyfill
• 回退到滚动、调整大小或方向更改事件处理程序来确定特定元素是否在视窗内

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