new repository

1 files changed, 104 insertions, 0 deletions

diff --git a/devdocs/html/attributes%2Frel%2Fmodulepreload.html b/devdocs/html/attributes%2Frel%2Fmodulepreload.html
new file mode 100644
index 00000000..5c6ffc3e
--- /dev/null
+++ b/devdocs/html/attributes%2Frel%2Fmodulepreload.html
@@ -0,0 +1,104 @@
+<header><h1>rel=modulepreload</h1></header><div class="section-content">
+<p>The <code>modulepreload</code> keyword, for the <a href="../rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code>&lt;link&gt;</code></a> element, provides a declarative way to preemptively fetch a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">module script</a>, parse and compile it, and store it in the document's module map for later execution.</p> <p> Preloading allows modules and their dependencies to be downloaded early, and can also significantly reduce the overall download and processing time. This is because it allows pages to fetch modules in parallel, instead of sequentially as each module is processed and its dependencies are discovered. Note however that you can't just preload everything! What you choose to preload must be balanced against other operations that might then be starved, adversely affecting user experience. </p> <p> Links with <code>rel="modulepreload"</code> are similar to those with <a href="preload"><code>rel="preload"</code></a>. The main difference is that <code>preload</code> just downloads the file and stores it in the cache, while <code>modulepreload</code> gets the module, parses and compiles it, and puts the results into the module map so that it is ready to execute. </p> <p> When using <code>modulepreload</code> the fetch request mode is always <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/mode#cors"><code>cors</code></a>, and the <a href="../crossorigin"><code>crossorigin</code></a> property is used to determine the request <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials">credential mode</a>. If <code>crossorigin</code> is set to <a href="../crossorigin#anonymous"><code>anonymous</code></a> or <a href="../crossorigin#sect1"><code>""</code></a> (default), then the credentials mode is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials#same-origin"><code>same-origin</code></a>, and user credentials such as cookies and authentication are only sent for requests with the <code>same-origin</code>. If <code>crossorigin</code> is set to <a href="../crossorigin#use-credentials"><code>use-credentials</code></a> then the credentials mode is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials#include"><code>include</code></a>, and user credentials for both single- and cross-origin requests. </p> <p> The <a href="../../element/link#as"><code>as</code></a> attribute is optional for links with <code>rel="modulepreload"</code>, and defaults to <code>"script"</code>. It can be set to <code>"script"</code> or any script-like destination, such as <code>"audioworklet"</code>, <code>"paintworklet"</code>, <code>"serviceworker"</code>, <code>"sharedworker"</code>, or <code>"worker"</code>. An <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/Event"><code>Event</code></a> named "error" is fired on the element if any other destination is used. </p> <p> A browser <em>may</em> additionally also choose to automatically fetch any dependencies of the module resource. Note however that this is a browser-specific optimization — the only approach to ensure that all browsers will try to preload a module's dependencies is to individually specify them! Further, the events named <code>load</code> or <code>error</code> fire immediately following success or failure of loading the <em>specified</em> resources. If dependencies are automatically fetched, no additional events are fired in the main thread (although you might monitor additional requests in a service worker or on the server). </p>
+</div>
+<h2 id="examples">Examples</h2>
+<div class="section-content">
+<p>Consider the <a href="https://github.com/mdn/js-examples/tree/master/module-examples/basic-modules" target="_blank">basic-modules</a> example (<a href="https://mdn.github.io/js-examples/module-examples/basic-modules/" target="_blank">live version</a>), introduced in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#basic_example_structure">JavaScript modules</a> guide.</p> <p>This has a file structure as shown below, consisting of the top level module <code>main.js</code>, which statically imports two dependency modules <code>modules/canvas.js</code> and <code>modules/square.js</code> using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code> statement</a>.</p> <pre data-language="plain">index.html
+main.js
+modules/
+    canvas.js
+    square.js
+</pre> <p> The HTML for the example below shows how <code>main.js</code> is fetched in a <code>&lt;script&gt;</code> element. Only after <code>main.js</code> has loaded does the browser discover and fetch the two dependency modules. </p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="jW/jmzFr6CY9QwprqwWpVqib77j1flxc0+ET/POkqrY=" data-language="html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Basic JavaScript module example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+      <span class="token selector">canvas</span> <span class="token punctuation">{</span>
+        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <p> The HTML below updates the example to use <code>&lt;link&gt;</code> elements with <code>rel="modulepreload"</code> for the main file and each of the dependency modules. This is much faster because the three modules all start downloading asynchronously and in parallel before they are needed. By the time <code>main.js</code> has been parsed and its dependencies are known, they have already been fetched and downloaded. </p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="S1a/U9BeJAqxxi3SJS9xxBNfUKltl5xrXN25AXBLfrc=" data-language="html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Basic JavaScript module example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modules/canvas.js<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modules/square.js<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+      <span class="token selector">canvas</span> <span class="token punctuation">{</span>
+        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div>
+</div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload">HTML Standard <br><small># link-type-modulepreload</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>modulepreload</code></th>
+<td class="bc-supports-yes">66</td>
+<td class="bc-supports-yes">≤79</td>
+<td class="bc-supports-yes">115</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">53</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">66</td>
+<td class="bc-supports-yes">66</td>
+<td class="bc-supports-yes">115</td>
+<td class="bc-supports-yes">47</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">9.0</td>
+</tr></tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>
+<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code>&lt;link rel="modulepreload"&gt;</code> and other similar performance improvement features.</li> <li>
+<a href="https://developer.chrome.com/blog/modulepreload" target="_blank">Preloading modules</a> (developer.chrome.com)</li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload</a>
+  </p>
+</div>