initial commit

1 files changed, 122 insertions, 0 deletions

diff --git a/files/zh-cn/web/performance/lazy_loading/index.html b/files/zh-cn/web/performance/lazy_loading/index.html
new file mode 100644
index 0000000000..6399c43e0f
--- /dev/null
+++ b/files/zh-cn/web/performance/lazy_loading/index.html
@@ -0,0 +1,122 @@
+---
+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="https://wiki.developer.mozilla.org/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>