diff options
Diffstat (limited to 'files/ko/web/html/preloading_content/index.html')
| -rw-r--r-- | files/ko/web/html/preloading_content/index.html | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/files/ko/web/html/preloading_content/index.html b/files/ko/web/html/preloading_content/index.html new file mode 100644 index 0000000000..30e602fbca --- /dev/null +++ b/files/ko/web/html/preloading_content/index.html @@ -0,0 +1,233 @@ +--- +title: Preloading content with rel="preload" +slug: Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +--- +<p class="summary"><span class="seoSummary"> {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 <code>preload</code>라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. </span></p> + +<p class="summary">이 문서는 <code><link rel="preload"></code> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.</p> + +<h2 id="The_basics">The basics</h2> + +<p>You most commonly use <code><link></code> to load a CSS file to style your page with:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code><link></code> into a preloader for any resource we want. You will also need to specify:</p> + +<ul> + <li>The path to the resource in the {{htmlattrxref("href", "link")}} attribute.</li> + <li>The type of resource in the {{htmlattrxref("as", "link")}} attribute.</li> +</ul> + +<p>A simple example might look like this (see our <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, and <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</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" defer></script> +</body></pre> + +<p>Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <code><link rel="stylesheet"></code> and <code><script></code> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:</p> + +<ul> + <li>Resources that are pointed to from inside CSS, like fonts or images.</li> + <li>Resources that JavaScript can request, like JSON, imported scripts, or web workers.</li> + <li>Larger images and video files.</li> +</ul> + +<p><code>preload</code> has other advantages too. Using <code>as</code> to specify the type of content to be preloaded allows the browser to:</p> + +<ul> + <li>Prioritize resource loading more accurately.</li> + <li>Store in the cache for future requests, reusing the resource if appropriate.</li> + <li>Apply the correct <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a> to the resource.</li> + <li>Set the correct {{HTTPHeader("Accept")}} request headers for it.</li> +</ul> + +<h3 id="What_types_of_content_can_be_preloaded">What types of content can be preloaded?</h3> + +<p>Many different content types can be preloaded. The possible <code>as</code> attribute values are:</p> + +<ul> + <li><code>audio</code>: Audio file, as typically used in {{htmlelement("audio")}}.</li> + <li><code>document</code>: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.</li> + <li><code>embed</code>: A resource to be embedded inside an {{htmlelement("embed")}} element.</li> + <li><code>fetch</code>: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.</li> + <li><code>font</code>: Font file.</li> + <li><code>image</code>: Image file.</li> + <li><code>object</code>: A resource to be embedded inside an {{htmlelement("object")}} element.</li> + <li><code>script</code>: JavaScript file.</li> + <li><code>style</code>: CSS stylesheet.</li> + <li><code>track</code>: WebVTT file.</li> + <li><code>worker</code>: A JavaScript web worker or shared worker.</li> + <li><code>video</code>: Video file, as typically used in {{htmlelement("video")}}.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Also note that the full list of values the <code>as</code> attribute can take is governed by the Fetch spec — see <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> +</div> + +<h2 id="Including_a_MIME_type">Including a MIME type</h2> + +<p><code><link></code> elements can accept a {{htmlattrxref("type", "link")}} attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the <code>type</code> attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.</p> + +<p>You can see an example of this in our video example (see the <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, and also <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</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"> + <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> +</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>So in this case, browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support MP4 can still load the WebM version, but don't get the advantages of preloading. This shows how preloading content can be combined with the philosophy of progressive enhancement.</p> + +<h2 id="Cross-origin_fetches">Cross-origin fetches</h2> + +<p>If you've got your sites' <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <code><link></code> element.</p> + +<p>One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>).</p> + +<p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</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.woff2" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> + + <link href="style.css" rel="stylesheet"> +</head> +<body> + … +</body></pre> + +<p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to handle the CORS issue.</p> + +<h2 id="Including_media">Including media</h2> + +<p>One nice feature of <code><link></code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> + +<p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</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>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> for more).</p> + +<p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> + +<p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> + +<h2 id="Scripting_and_preloads">Scripting and preloads</h2> + +<p>Another nice thing about these preloads is that you can execute them with script. For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the 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>This means that the browser will preload the <code>myscript.js</code> file, but not actually use it yet. To use it, you could do this:</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>This is useful when you want to preload a script, but then defer execution until exactly when you need it.</p> + +<h2 id="Other_resource_preloading_mechanisms">Other resource preloading mechanisms</h2> + +<p>Other preloading features exist, but none are quite as fit for purpose as <code><link rel="preload"></code>:</p> + +<ul> + <li><code><link rel="prefetch"></code> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the <strong><em>next</em></strong> navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give <code>prefetch</code> resources a lower priority than <code>preload</code> ones — the current page is more important than the next. See <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> for more details.</li> + <li><code><link rel="prerender"></code> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats <code>prerender</code> as a <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a> instead.</li> + <li><code><link rel="subresource"></code> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as <code>preload</code>, but it had a problem: there was no way to work out a priority for the items (<code>as</code> didn't exist back then), so they all got fetched with fairly low priority.</li> + <li>There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.</li> +</ul> + +<h2 id="Specifications" name="Specifications">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>Further details of <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of <code>rel=preload</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.link.rel.preload")}}</p> + +<h2 id="See_also">See also</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> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> |