diff options
| author | MDN <actions@users.noreply.github.com> | 2021-05-21 00:42:40 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2021-05-21 00:42:40 +0000 |
| commit | 4d3b1c2c79113786e001e3bec551205cd34f818a (patch) | |
| tree | fcff970c1fb2155bfcd55f5e2056a79cefd58890 /files/zh-cn/orphaned/web/html | |
| parent | a8cc0431ca75f502b324ec880c62c0f6caf71727 (diff) | |
| download | translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.tar.gz translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.tar.bz2 translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/orphaned/web/html')
5 files changed, 530 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/web/html/element/isindex/index.html b/files/zh-cn/orphaned/web/html/element/isindex/index.html new file mode 100644 index 0000000000..6ab341ec6f --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/isindex/index.html @@ -0,0 +1,41 @@ +--- +title: <isindex> +slug: orphaned/Web/HTML/Element/isindex +tags: + - HTML + - Web +translation_of: Web/HTML/Element/isindex +original_slug: Web/HTML/Element/isindex +--- +<div>{{Deprecated_header}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><code><strong><isindex>元素</strong>的作用是</code>使浏览器显示一个对话框，提示用户输入单行文本。在W3C的规范中建议，<code><isindex>元素最好被放置在</code> {{HTMLElement("head")}} 标签块内，但是对于浏览器来说，<isindex>标签在页面任何位置都没有关系。</p> + +<p>从HTML4规范开始，就不建议在您编写的HTML文档内使用<isindex>元素，您可以用<input>标签来替代。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>本元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("prompt")}}</dt> + <dd>该属性用作在输入框前添加一个输入提示文本。</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>本属性可以规定文本框中的值发送向一个没有被W3C规范的URL。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><head> + <isindex prompt="Search Document... " /> +</head></pre> + +<h2 id="See_also" name="See_also">参阅</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/orphaned/web/html/element/listing/index.html b/files/zh-cn/orphaned/web/html/element/listing/index.html new file mode 100644 index 0000000000..672a23df81 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/listing/index.html @@ -0,0 +1,40 @@ +--- +title: <listing> +slug: orphaned/Web/HTML/Element/listing +translation_of: Web/HTML/Element/listing +original_slug: Web/HTML/Element/listing +--- +<div>{{Obsolete_header}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><em>HTML 列表元素</em> (<code><listing></code>) 渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。HTML2 标准建议，当一行不超过 132 个字符时，不应该将其拆开。</p> + +<div class="note">注：不要使用这个元素。 +<ul> + <li>它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。它甚至在 HTML5 中过时，并且可能由某些浏览器渲染为 {{HTMLElement("pre")}} 元素，它会解释其中的 HTML。</li> + <li>而是要使用 {{HTMLElement("pre")}} 元素，或者如果满足语义的话，使用 {{HTMLElement("code")}} 元素，最终会转义 HTML '<code><</code>' 和 <code>></code>' ，以便它们不会被解释。</li> + <li>等宽字体也可以显示在 {{HTMLElement("div")}} 元素中，通过使用足够的 <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> 样式，在 {{cssxref("font-family")}} 中将 <code>monospace</code> 用作通用字体（generic-font）的值。</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>除了 <a class="new " href="/en-US/docs/Web/HTML/global_attributes" rel="internal" title="HTML/global attributes">全局属性</a> 之外，这个元素没有其它属性。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> + +<p>元素实现了 {{domxref('HTMLElement')}} 接口。</p> + +<div class="note"> +<p><strong>实现注解：</strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> +</div> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li>{{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。</li> + <li>{{HTMLElement("plaintext")}} 和 {{HTMLElement("xmp")}} 元素，类似于 {{HTMLElement("listing")}} 但是也过时了。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/orphaned/web/html/element/multicol/index.html b/files/zh-cn/orphaned/web/html/element/multicol/index.html new file mode 100644 index 0000000000..589528af71 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/multicol/index.html @@ -0,0 +1,19 @@ +--- +title: <multicol> +slug: orphaned/Web/HTML/Element/multicol +tags: + - CSS Column +translation_of: Web/HTML/Element/multicol +original_slug: Web/HTML/Element/multicol +--- +<div>{{non-standard_header}}</div> + +<h2 id="概要">概要</h2> + +<p>HTML<multicol> 元素是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。</p> + +<div class="note"> +<p>不要使用这个！<strong><em> </em></strong>为了实现多列布局，你应该使用常规的 HTML 元素，例如组合 {{HTMLElement("div")}} 和 <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/CSS/columns">CSS 列</a> 特性。</p> +</div> + +<p>要注意， Firefox 22 之前，虽然不受支持， <code><multicol></code> 元素和 {{domxref("HTMLSpanElement")}} 相关。按照规定的要求，之后它被修复，并且现在和 {{domxref("HTMLUnknownElement")}} 相关。</p> diff --git a/files/zh-cn/orphaned/web/html/element/nextid/index.html b/files/zh-cn/orphaned/web/html/element/nextid/index.html new file mode 100644 index 0000000000..bf5ff5d3be --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/nextid/index.html @@ -0,0 +1,141 @@ +--- +title: '<nextid>: 下一个ID元素（已过时）' +slug: orphaned/Web/HTML/Element/nextid +tags: + - HTML + - 元素 + - 参考 + - 网页 +translation_of: Web/HTML/Element/nextid +original_slug: Web/HTML/Element/nextid +--- +<div>{{Deprecated_header}}</div> + +<p><span class="seoSummary"><strong><code><nextid></code></strong> 是一个过时的HTML元素，用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 它是由该Web编辑工具自动生成的，不需要手动调整或输入。 通过从HTML版本的官方公共DTD中删除，此元素的区别在于它是第一个成为“丢失标签”之一的元素。 它也可能是所有早期HTML元素中最少被了解的之一。</span></p> + +<dl> + <dt>HTML "0.a" - 从开始到1991年1月10日</dt> + <dd>该标签尚未发明，因此在此期间未发现任何示例。</dd> + <dt>HTML "0.c" - 从1991年1月23日至1992年11月23日</dt> + <dd>HTML的此早期版本以非SGML兼容形式引入了<code><NEXTID></code>该形式仅将数字值单独用作“属性”。 </dd> + <dt>HTML "0.d" - 从1992年11月26日到1993年5月24日</dt> + <dd>在此跨度内，NeXT和尚存的最早的DTD表示<code><NEXTID></code> 仅对其新引入的属性N的值取一个数字。</dd> + <dt>HTML "1.k" - 版本1（第一版）</dt> + <dd>在HTML的第一个初稿中，<code><NEXTID></code> 与HTML 2相同，最终允许使用名称代替其属性值仅使用数字。</dd> + <dt>HTML "1.m" - 版本1（第二版）</dt> + <dd>在下一个发布的HTML草案中，可以使用简单的SGML命令分别取消选择<code><NEXTID></code> <code><NEXTID></code> 进行显示。</dd> + <dt>HTML 第2版第1级</dt> + <dd>这类似于2级默认值，但不包括所有表单元素。 i. e. <code><FORM></code>, <code><INPUT></code>, <code><TEXTAREA></code>, <code><SELECT></code>, 和 <code><OPTION></code></dd> + <dt>HTML 版本2严格级别1</dt> + <dd>这类似于常规的1级，但它也排除了这些折旧的元素以及诸如在链接(<code><A></code> 内嵌套标头（<code><H*></code> 元素）之类的构造。</dd> + <dt>HTML 第2版第2级</dt> + <dd>这是默认设置，包括并允许所有HTML 2级功能以及元素和属性</dd> + <dt>HTML 第2版严格级别2</dt> + <dd>这不包括这些已贬值的元素，也禁止诸如在链接 (<code><A>元素内嵌套标头</code>(<code><H*></code> 元素），或者有一个表单 <code><INPUT></code> 元素，它不在一个块级别中的元素如 <code><P></code>中。</dd> + <dt>HTML 版本3.2</dt> + <dd><code><NEXTID></code> 完全消失了，再也不会被听到。.</dd> +</dl> + +<h2 id="属性">属性</h2> + +<p>像所有其他HTML元素一样，此元素接受<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("n")}}</dt> + <dd>参考锚点。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>用户在目录中输入四个部分标题（并且大概也在这些部分中编写段落材料）。 四个部分中每个部分的标题将被分配名称值“ z0”，“ z1”，“ z2”和“ z3”。 其中第一个将在目录中产生如下条目：<code><A NAME="z0" HREF="#z4">FIRST SECTION NAME</A></code> 并且节标题将被标记为： <code><H2><A NAME="z4">FIRST SECTION NAME</A></H2></code>. 接下来的三个部分z5，z6和z7（以及名为z1，z2和z3的目录条目）将继续这三个部分，每个部分都会自动使用这些名称来指定锚点。然后，用户保存并关闭文档。 然后，NeXT将在HTML文档的标头中添加一个特殊标记 <code><NEXTID N="z8"></code>, 以告知在何处继续其命名约定。 想象一下，网络作者打开了文档进行进一步编辑。 他们想在第二部分之后添加几个新的部分，并在末尾追加四个部分。 打开文档时，NeXT编辑器会找到并读取此 <code><NEXTID N="z8"></code>标记， 并且现在知道将这些新节中的第一个命名为目录中的z8，并将z14命名为内容主体。 可能看起来像这样：</p> + +<pre class="brush: html"><HTML> + <HEAD> + <TITLE> ... whatever ... </TITLE> + <LINK, META, BASE, etc. as applicable for the head of this document> + <NEXTID N="z20"> + </HEAD> + + <BODY> + <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> + <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> + <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> + <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> + <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> + <A NAME="z3" HREF="#z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A> + <A NAME="z10" HREF="#z16">SEVENTH SECTION HEADING</A> + <A NAME="z11" HREF="#z17">EIGHTH SECTION HEADING</A> + <A NAME="z12" HREF="#z18">NINTH SECTION HEADING</A> + <A NAME="z13" HREF="#z19">TENTH SECTION HEADING</A> + <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z16">SEVENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z17">EIGHTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z18">NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z19">TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + </BODY> +</HTML> +</pre> + +<p>然后，他们使用NeXT编辑器将该文档的副本转发给某人，并删除z7和z19节，从z20到z29添加十个节，然后删除z24和z29段。 因此，返回修改后的NEXTID值是z30：</p> + +<pre class="brush: html"><HTML> + <HEAD> + <TITLE> ... whatever ... </TITLE> + <LINK, META, BASE, etc. as applicable for the head of this document> + <NEXTID N="z30"> + </HEAD> + + <BODY> + <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> + <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> + <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> + <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> + <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> + <A NAME="z10" HREF="#z16">SEVENTH (NOW SIXTH) SECTION HEADING</A> + <A NAME="z11" HREF="#z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A> + <A NAME="z12" HREF="#z18">NINTH (NOW EIGHTH) SECTION HEADING</A> + <A NAME="z20" HREF="#z25">NEW NINTH SECTION HEADING</A> + <A NAME="z21" HREF="#z26">NEW TENTH SECTION HEADING</A> + <A NAME="z22" HREF="#z27">NEW ELEVENTH SECTION HEADING</A> + <A NAME="e23" HREF="#z28">NEW TWELFTH SECTION HEADING</A> + <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z16">SEVENTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z18">NINTH (NOW EIGHTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z25">NEW NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z26">NEW TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z27">NEW ELENENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z28">NEW TWELFTH SECTION HEADING</A></H1><P> ... whatever ... </P> + </BODY> +</HTML> +</pre> + +<h2 id="HTML_参考">HTML 参考</h2> + +<ul> + <li><a class="external text" href="http://www.the-pope.com/nextid.html" rel="nofollow">工作 NEXTID 标签元素实例</a></li> + <li><a class="external text" href="https://tools.ietf.org/html/rfc1866#section-5.2.6" rel="nofollow">5.2.6. 下一个ID: NEXTID</a></li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面中的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</div> + +<p>{{Compat("html.elements.nextid")}}</p> + +<h2 id="另请详见">另请详见</h2> + +<ul> + <li>{{HTMLElement("isindex")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/orphaned/web/html/preloading_content/index.html b/files/zh-cn/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..454ea6a38b --- /dev/null +++ b/files/zh-cn/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,289 @@ +--- +title: 通过rel="preload"进行内容预加载 +slug: orphaned/Web/HTML/Preloading_content +tags: + - HTML + - JavaScript + - Link + - as + - 媒体 + - 媒体查询 + - 性能 + - 性能优化 + - 指南 + - 预加载 +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +<p class="summary"> {{htmlelement("link")}} 元素的 {{htmlattrxref("rel", "link")}} 属性的属性值<code>preload</code>能够让你在你的HTML页面中 {{htmlelement("head")}}元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用<code>preload</code>机制的基本说明。</p> + +<h2 id="基础部分">基础部分</h2> + +<p><code><link></code> 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>但是在这里，我们将使用<code>preload</code>作为<code>rel</code>属性的属性值。这种做法将把<code><link></code> 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 {{htmlattrxref("href", "link")}}和{{htmlattrxref("as", "link")}} 属性指定需要被预加载资源的资源路径及其类型。</p> + +<p>一个简单的例子可能看起来像下面这样 （在这里可以查看示例的<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS和CSS源代码</a>，或是<a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">在线实例</a>）</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>JS and CSS preload example</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>bouncing balls</h1> + <canvas></canvas> + + <script src="main.js"></script> +</body></pre> + +<p>在这里，我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观的得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说，也是如此。 例如那些在CSS文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件。</p> + +<p><code>preload</code> 还有许多其他好处。使用 <code>as</code> 来指定将要预加载的内容的类型，将使得浏览器能够：</p> + +<ul> + <li>更精确地优化资源加载优先级。</li> + <li>匹配未来的加载需求，在适当的情况下，重复利用同一资源。</li> + <li>为资源应用正确的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">内容安全策略</a>。</li> + <li>为资源设置正确的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept" title="The Accept request HTTP header advertises which content types, expressed as MIME types, the client is able to understand. Using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the Content-Type response header. Browsers set adequate values for this header depending of the context where the request is done: when fetching a CSS stylesheet a different value is set for the request than when fetching an image, video or a script."><code>Accept</code></a> 请求头。</li> +</ul> + +<h3 id="哪些类型的内容可以被预加载？">哪些类型的内容可以被预加载？</h3> + +<p>许多不同类型的内容都可以被预加载，一些主要可用的<code>as</code> 属性值列举如下：</p> + +<ul> + <li><code>audio</code>: 音频文件。</li> + <li><code>document</code>: 一个将要被嵌入到{{htmlelement("frame")}}或{{htmlelement("iframe")}}内部的HTML文档。</li> + <li><code>embed</code>: 一个将要被嵌入到{{htmlelement("embed")}}元素内部的资源。</li> + <li><code>fetch</code>: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。</li> + <li><code>font</code>: 字体文件。</li> + <li><code>image</code>: 图片文件。</li> + <li><code>object</code>: 一个将会被嵌入到{{htmlelement("embed")}}元素内的文件。</li> + <li><code>script</code>: JavaScript文件。</li> + <li><code>style</code>: 样式表。</li> + <li><code>track</code>: WebVTT文件。</li> + <li><code>worker</code>: 一个JavaScript的web worker或shared worker。</li> + <li><code>video</code>: 视频文件。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 你可以通过进一步阅读<a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>来了解关于这些属性值以及其他在Preload方案中预期将采纳的特性的细节。同样需要注意的是，关于<code>as</code>属性的有效值得完整列表是由Fetch方案来制定的，可以查看<a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>来进行了解。</p> +</div> + +<h2 id="包含一个MIME类型">包含一个MIME类型</h2> + +<p><code><link></code> 元素可以接受一个{{htmlattrxref("type", "link")}}属性。这一属性可以包含该元素所指向资源的MIME类型。在浏览器进行预加载的时候，这个属性值将会非常有用——浏览器将使用<code>type</code>属性来判断它是否支持这一资源，如果浏览器支持这一类型资源的预加载，下载将会开始，否则便对其加以忽略。</p> + +<p>你可以在我们的视频示例中看到一个与此有关的示例（查看<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">完整源码</a>，也可以查看<a href="https://mdn.github.io/html-examples/link-rel-preload/video/">在线示例</a>）:</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Video preload example</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> + </video> +</body></pre> + +<p>在这个实例中，支持MP4格式的浏览器将仅预加载并使用MP4资源，以使得视频播放器的表现尽可能的流畅，或者说，为用户提供更好的响应。而不支持MP4格式的浏览器仍然能够加载视频的WebM版本，但无法体验到预加载带来的良好体验。这个例子展示了预加载机制如何与渐进式增强的哲学进行有机的结合。</p> + +<h2 id="跨域获取">跨域获取</h2> + +<p>如果你已经有了一个可以正确工作的<a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>设置，那么你也可以同样成功的预加载那些跨域资源，只需要你在<code><link></code>元素中设置好{{htmlattrxref("crossorigin","link")}}属性即可。</p> + +<p>一个有趣的情况是，如果你需要获取的是字体文件，那么即使是非跨域的情况下，也需要应用这一属性。因为各种各样的原因，这些获取请求必须使用以匿名模式使用CORS（如果你对其中的细节感兴趣，可以查看<a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>一文）。</p> + +<p>我们将以这个情况作为一个示例——首先是由于字体文件的加载是预加载方面一个好的用例，其次，这也比真正的配置一个跨域请求的例子要简单许多。你可以查看 <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">在Github上的示例源代码</a>（也可以查看<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">在线示例</a>）：</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Web font example</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + + <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + + <link href="style.css" rel="stylesheet" type="text/css"> +</head> +<body> + ... +</body></pre> + +<p>你可以看到，在这里，我们不仅通过配置<code>type</code>属性提供了一个MIME类型的暗示，我们也提供了一个<code>crossorigin</code> 属性来处理CORS问题。</p> + +<h2 id="包含媒体">包含媒体</h2> + +<p><code><link></code>元素有一个很棒的特性是它们能够接受一个{{htmlattrxref("media", "link")}}属性。它们可以接受<a href="/en-US/docs/Web/CSS/@media#Media_types">媒体类型</a>或有效的<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询</a>作为属性值，这将令你能够使用响应式的预加载！</p> + +<p>让我们来看一个简单的示例（可以查看<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">Github上的源代码</a>或<a href="https://mdn.github.io/html-examples/link-rel-preload/media/">在线示例</a>）：</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Responsive preload example</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>My site</h1> + </header> + + <script> + var mediaQueryList = window.matchMedia("(max-width: 600px)"); + var header = document.querySelector('header'); + + if(mediaQueryList.matches) { + header.style.backgroundImage = 'url(bg-image-narrow.png)'; + } else { + header.style.backgroundImage = 'url(bg-image-wide.png)'; + } + </script> +</body></pre> + +<p>你可以看到我们在<code><link></code>元素中包含了一个<code>media</code>属性，因此，当用户在使用较窄屏幕的设备时，较窄的图片将会被预加载，而在较宽的设备上，较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过{{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} 来加以实现（可以查看<a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>一文来了解更多信息）。</p> + +<p>这一特性将使另一种情况成为可能——字体在随着页面渲染完成的时候即可使用，减少了FOUT (无样式字体闪烁，flash of unstyled text)问题。</p> + +<p>值得注意的是，这一特特性并不仅限于图片，或其他有着同样类型的文件，还有更多想象空间。比如，你可以在用户仅有较窄的屏幕，CPU和带宽资源较为有限的情况下预加载并展示一个简单的SVG图表，而在用户资源较为充裕的时候再去加载一系列复杂的JavaScript文件以显示一个有交互功能的3D模型。</p> + +<h2 id="脚本化与预加载">脚本化与预加载</h2> + +<p>另一项很棒的关于预加载的事情是，如果需要，你可以完全以脚本化的方式来执行这些预加载操作。例如，我们在这里创建一个{{domxref("HTMLLinkElement")}}实例，然后将他们附加到DOM上：</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>这意味着浏览器将预加载这个JavaScript文件，但并不实际执行它。</p> + +<p>如果要对其加以执行，在需要的时候，你可以执行：</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>当你需要预加载一个脚本，但需要推迟到需要的时候才令其执行时，这种方式会特别有用。</p> + +<h2 id="其他资源预加载机制">其他资源预加载机制</h2> + +<p>还存在一些其他预加载机制，但没有哪个会比<code><link rel="preload"></code>在大多数情况下更符合你的需要和预期：</p> + +<ul> + <li><code><link rel="prefetch"></code> 已经被许多浏览器支持了相当长的时间，但它是意图预获取一些资源，以备下一个导航/页面使用（比如，当你去到下一个页面时）。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用<code>prefetch</code>的资源一个相对较低的优先级——与使用<code>preload</code>的资源相比。毕竟，当前的页面比下一个页面相对更加重要。查看<a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a>可以了解更多细节。</li> + <li><code><link rel="subresource"></code>被Chrome支持了有一段时间，并且已经有些搔到预加载当前导航/页面（所含有的资源）的痒处了。但它有一个问题——没有办法处理所获取内容的优先级（<code>as</code>也并不存在），所以最终，这些资源会以一个相当低的优先级被加载，这使得它能提供的帮助相当有限。</li> + <li>除以上这些以外，还有大量的基于脚本的资源加载器。但这些加载器对于浏览器的加载优先级队列完全束手无策，这也使得他们不得不屈服于同样的性能问题。</li> +</ul> + +<h2 id="Specifications" name="Specifications">相关规范／草案</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td><code>preload</code> 的更多详情</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>rel=preload</code> 的定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("56")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>47</td> + <td>11</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(56)}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoMobile("56")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox支持对于如下内容的预加载（{{htmlattrxref("as","link")}}属性的有效值）—— <code>script</code>，<code>style</code>，<code>image</code>，<code>video</code>，<code>audio</code>，<code>track</code>，<code>font</code>， 以及 <code>fetch</code>。关于所支持的字体类型的预加载被定义在<a href="https://www.iana.org/assignments/media-types/media-types.xhtml#font">fonts media type list</a> 中（注意，<code>font/collection</code>不被支持）。同样需要注意的是，当前的Firefox仅支持可缓存资源的预加载。</p> + +<h2 id="其他参考">其他参考</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> +</ul> |