path: root/files/zh-cn/web/performance/lazy_loading/index.html

---
title: Lazy loading
slug: Web/Performance/Lazy_loading
tags:
  - Lazy-loading
  - Web Performance
  - 延迟加载
  - 性能优化
  - 懒加载
translation_of: Web/Performance/Lazy_loading
---
<p><span class="seoSummary"><strong>延迟加载(懒加载) </strong></span>是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。<span class="seoSummary"><span> </span></span>这是一种缩短<a href="/zh-CN/docs/Web/Performance/Critical_rendering_path">关键渲染路径</a>长度的方法，可以缩短页面加载时间。</p>

<p>延迟加载可以在应用程序的不同时刻发生，但通常会在某些用户交互（例如滚动和导航）上发生。</p>

<h2 id="概览">概览</h2>

<p>随着网络的发展，我们已经看到发送给用户的资产数量和规模都在急剧增加。从2011年到2019年，台式机的资源中位数从 <strong>~100KB </strong>增至 <strong>~400KB</strong>，移动版的资源中位数从 <strong>~50KB</strong> 增至<strong>~350KB</strong>。图像大小已从台式机上的<strong>~250KB </strong>增至 <strong>~900KB</strong>，而移动设备上的 <strong>~100KB</strong>增至<strong>~850KB</strong>。</p>

<p>One of the methods we can use to tackle this problem is to shorten the <a href="/en-US/docs/Web/Performance/Critical_rendering_path">Critical Rendering Path</a> length by lazy loading resources that are not critical for the first render to happen.<br>
 A practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (JS, CSS, images...) are downloaded <strong>only</strong> when the user navigates to that cart page.</p>

<h2 id="策略">策略</h2>

<p>延迟加载可以通过多种策略应用于多个资源。</p>

<h3 id="一般">    一般</h3>

<p id="Code_splitting">代码拆分<br>
 JavaScript, CSS and HTML can be split into smaller chunks. This enables sending the minimal code required to provide value upfront, improving page-load times. The rest can be loaded on demand.</p>

<ul>
 <li>    Entry point splitting: separates code by entry point(s) in the app</li>
 <li>    Dynamic splitting: separates code where <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">dynamic import()</a> statements are used</li>
</ul>

<h3 id="JavaScript">    JavaScript</h3>

<p>脚本类型模块<br>
 任何类型为 <code>type="module" </code>的脚本标签都被视为一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules">JavaScript 模块</a>，并且默认情况下会被延迟。</p>

<h3 id="CSS">    CSS</h3>

<p>默认情况下，CSS被视为<a href="https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path">渲染阻塞</a>资源，因此，在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model">CSSOM</a> 被构造完成之前，浏览器不会渲染任何已处理的内容。CSS 必须很薄，才能尽快交付，建议使用媒体类型和查询实现非阻塞渲染。</p>

<pre class="notranslate">&lt;link href="style.css"    rel="stylesheet" media="all"&gt;
&lt;link href="portrait.css" rel="stylesheet" media="orientation:portrait"&gt;
&lt;link href="print.css"    rel="stylesheet" media="print"&gt;
</pre>

<p>可以执行一些 <a href="/zh-CN/docs/Learn/Performance/CSS">CSS 优化</a>来实现这一目标。</p>

<h3 id="Fonts">Fonts</h3>

<p>默认情况下，字体请求会延迟到构造渲染树之前，这可能会导致文本渲染延迟。</p>

<p>It is possible to override the default behaviour and preload web font resources using <code>&lt;link rel="preload"&gt;</code>, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display">CSS font-display property</a>, and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API">Font Loading API</a>.<br>
 <br>
 See also: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">Element Link</a></p>

<h3 id="Images_and_iframes">Images and iframes</h3>

<p>Very often, webpages contain many images that contribute to data-usage and how fast a page can load. Most of those images are off-screen (<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">non-critical</a>), requiring user interaction (an example being scroll) in order to view them.</p>

<p><strong>Loading </strong>属性<br>
 The {{htmlattrxref("loading", "img")}} attribute on an {{HTMLElement("img")}} element (or the {{htmlattrxref("loading", "iframe")}} attribute on an {{HTMLElement("iframe")}}) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.</p>

<pre class="notranslate">&lt;img src="image.jpg" alt="..." loading="lazy"&gt;
&lt;iframe src="video-player.html" title="..." loading="lazy"&gt;&lt;/iframe&gt;</pre>

<p>The <code>load</code> event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the {{Glossary("visual viewport")}} that haven't yet loaded.</p>

<p>You can determine if a given image has finished loading by examining the value of its Boolean {{domxref("HTMLImageElement.complete", "complete")}} property.</p>

<p><strong>Polyfill</strong><br>
 Include this polyfill to provide support for older and currently incompatible browsers:<br>
 <a href="https://github.com/mfranzke/loading-attribute-polyfill" rel="noopener">loading-attribute-polyfill</a></p>

<p><strong>交叉观察者 API</strong><br>
 <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">Intersection Observers</a> allow the user to know when an observed element enters or exits the browser’s viewport.</p>

<p><strong>事件处理程序</strong><br>
 当浏览器的兼容性至关重要时，有以下几种选择：</p>

<ul>
 <li><a href="https://github.com/w3c/IntersectionObserver">polyfill intersection observer</a></li>
 <li>后退以滚动，调整大小或改变方向的事件处理程序，以确定特定元素是否在视口中</li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th><strong>Specification</strong></th>
   <th><strong>Status</strong></th>
   <th><strong>Comment</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#lazy-loading-attributes")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="查看更多">查看更多</h2>

<ul>
 <li><a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css">Render blocking CSS</a></li>
 <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#optimizing_loading_and_rendering">Optimizing loading and rendering</a></li>
 <li><a href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video">Lazy loading images and video</a></li>
</ul>

<dl>
</dl>

<div id="gtx-trans" style="position: absolute; left: 160px; top: 2955px;">
<div class="gtx-trans-icon"></div>
</div>