Skip to content

Add external <script type=speculationrules> #11697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Add external <script type=speculationrules> #11697

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5dd931
Add external <script type=speculationrules>
vickiez Sep 24, 2025
0f1c473
remove async attribute
vickiez Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 84 additions & 51 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63803,11 +63803,12 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {

<p>The second core attribute is the <dfn for="script" element-attr><code
data-x="attr-script-src">src</code></dfn> attribute. It must only be specified for <span
data-x="classic script">classic scripts</span> and <span data-x="JavaScript module
script">JavaScript module scripts</span>, and denotes that instead of using the element's
<span>child text content</span> as the script content, the script will be fetched from the
specified <span>URL</span>. If <code data-x="attr-script-src">src</code> is specified, it must be
a <span>valid non-empty URL potentially surrounded by spaces</span>.</p>
data-x="classic script">classic scripts</span>, <span data-x="JavaScript module script">JavaScript
module scripts</span>, and <span data-x="speculation rule set">speculation rules</span>, and
denotes that instead of using the element's <span>child text content</span> as the script content,
the script will be fetched from the specified <span>URL</span>. If <code
data-x="attr-script-src">src</code> is specified, it must be a <span>valid non-empty URL
potentially surrounded by spaces</span>.</p>

<p>Which other attributes may be specified on a given <code>script</code> element is determined by
the following table:</p>
Expand Down Expand Up @@ -63876,7 +63877,17 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<tr>
<th>Speculation rules</th>
<th>External speculation rules</th>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="yes">Yes</td>
<td class="yes">Yes</td>
<td class="yes">Yes</td>
<td class="yes">Yes</td>
<tr>
<th>Inline speculation rules</th>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
Expand Down Expand Up @@ -64744,15 +64755,14 @@ document.body.append(script1, script2);
<ol>
<li>
<p>If <var>el</var>'s <span data-x="concept-script-type">type</span> is "<code
data-x="">importmap</code>" or "<code data-x="">speculationrules</code>", then <span>queue an
element task</span> on the <span>DOM manipulation task source</span> given <var>el</var> to
<span data-x="concept-event-fire">fire an event</span> named <code
data-x="event-error">error</code> at <var>el</var>, and return.</p>
data-x="">importmap</code>", then <span>queue an element task</span> on the <span>DOM
manipulation task source</span> given <var>el</var> to <span data-x="concept-event-fire">fire
an event</span> named <code data-x="event-error">error</code> at <var>el</var>, and
return.</p>

<p class="note">External import maps and speculation rules are not currently supported. See <a
href="https://github.com/WICG/import-maps/issues/235">WICG/import-maps issue #235</a> and <a
href="https://github.com/WICG/nav-speculation/issues/348">WICG/nav-speculation issue #348</a>
for discussions on adding support.</p>
<p class="note">External import maps are not currently supported. See <a
href="https://github.com/WICG/import-maps/issues/235">WICG/import-maps issue #235</a> for
discussions on adding support.</p>
</li>

<li><p>Let <var>src</var> be the value of <var>el</var>'s <code
Expand Down Expand Up @@ -64814,6 +64824,21 @@ document.body.append(script1, script2);
<p><span>Fetch an external module script graph</span> given <var>url</var>, <var>settings
object</var>, <var>options</var>, and <var>onComplete</var>.</p>
</dd>

<dt>"<code data-x="">speculationrules</code>"</dt>
<dd>
<ol>
<li><p>Let <var>speculationRulesText</var> be the result of <span data-x="fetch speculation
rules">fetching speculation rules</span> given <var>url</var> and
<var>document</var>.</p></li>

<li><p>Let <var>result</var> be the result of <span data-x="create a speculation rules parse
result">creating a speculation rules parse result</span> given
<var>speculationRulesText</var> and <var>document</var>.</p></li>

<li><p>Run <var>onComplete</var> given <var>result</var>.</p></li>
</ol>
</dd>
</dl>

<p>For performance reasons, user agents may start fetching the classic script or module graph
Expand Down Expand Up @@ -108688,7 +108713,7 @@ new PaymentRequest(&hellip;); // Allowed to use
are delivered as JSON documents, via either:</p>

<ul>
<li><p>inline <code>script</code> elements with their <code data-x="attr-script-type">type</code>
<li><p><code>script</code> elements with their <code data-x="attr-script-type">type</code>
attribute set to "<code data-x="">speculationrules</code>"; or</p></li>

<li><p>resources fetched from a URL specified in the `<code>Speculation-Rules</code>` HTTP
Expand Down Expand Up @@ -110404,45 +110429,19 @@ new PaymentRequest(&hellip;); // Allowed to use
steps:</p>

<ol>
<li><p>Let <var>request</var> be a new <span data-x="concept-request">request</span> whose
<span data-x="concept-request-url">URL</span> is <var>url</var>, <span
data-x="concept-request-destination">destination</span> is "<code
data-x="">speculationrules</code>", and <span data-x="concept-request-mode">mode</span> is
"<code data-x="">cors</code>".</p></li>
<li><p>Let <var>speculationRulesText</var> be the result of <span data-x="fetch
speculation rules">fetching speculation rules</span> given <var>url</var> and
<var>document</var>.</p></li>

<li>
<p><span data-x="concept-fetch">Fetch</span> <var>request</var> with the following <i
data-x="processResponseConsumeBody">processResponseConsumeBody</i> steps given <span
data-x="concept-response">response</span> <var>response</var> and null, failure, or a
<span>byte sequence</span> <var>bodyBytes</var>:</p>

<ol>
<li><p>If <var>bodyBytes</var> is null or failure, then abort these steps.</p></li>

<li><p>If <var>response</var>'s <span data-x="concept-response-status">status</span> is
not an <span>ok status</span>, then abort these steps.</p></li>

<li><p>If the result of <span data-x="extract a MIME type">extracting a MIME type</span>
from <var>response</var>'s <span data-x="concept-response-header-list">header list</span>
does not have an <span data-x="MIME type essence">essence</span> of
"<code>application/speculationrules+json</code>", then abort these steps.</p></li>

<li><p>Let <var>bodyText</var> be the result of <span data-x="UTF-8 decode">UTF-8
decoding</span> <var>bodyBytes</var>.</p></li>
<li><p>Let <var>ruleSet</var> be the result of <span data-x="parse a speculation rule set
string" >parsing a speculation rule set string</span> given
<var>speculationRulesText</var>, <var>document</var>, and <var>url</var>.</p></li>

<li><p>Let <var>ruleSet</var> be the result of <span data-x="parse a speculation rule set
string">parsing a speculation rule set string</span> given <var>bodyText</var>,
<var>document</var>, and <var>response</var>'s <span
data-x="concept-response-url">URL</span>. If this throws an exception, then abort these
steps.</p></li>
<li><p><span data-x="list append">Append</span> <var>ruleSet</var> to
<var>document</var>'s <span data-x="document-sr-sets">speculation rule
sets</span>.</p></li>

<li><p><span data-x="list append">Append</span> <var>ruleSet</var> to
<var>document</var>'s <span data-x="document-sr-sets">speculation rule
sets</span>.</p></li>

<li><p><span>Consider speculative loads</span> for <var>document</var>.</p></li>
</ol>
</li>
<li><p><span>Consider speculative loads</span> for <var>document</var>.</p></li>
</ol>
</li>
</ol>
Expand Down Expand Up @@ -113277,6 +113276,40 @@ document.querySelector("button").addEventListener("click", bound);
pass it along as well.</p></li>
</ol>

<p>To <dfn>fetch speculation rules</dfn>, given a <span>URL</span> <var>url</var> and
<code>Document</code> <var>document</var>, run these steps.

<ol>
<li><p>Let <var>request</var> be a new <span data-x="concept-request">request</span> whose <span
data-x="concept-request-url">URL</span> is <var>url</var>, <span
data-x="concept-request-client">client</span> is <var>document</var>'s <span>relevant settings
object</span>, <span data-x="concept-request-destination">destination</span> is "<code
data-x="">speculationrules</code>", and <span data-x="concept-request-mode">mode</span> is
"<code data-x="">cors</code>".</p></li>

<li>
<p><span data-x="concept-fetch">Fetch</span> <var>request</var> with the following <i
data-x="processResponseConsumeBody">processResponseConsumeBody</i> steps given <span
data-x="concept-response">response</span> <var>response</var> and null, failure, or a
<span>byte sequence</span> <var>bodyBytes</var>:</p>

<ol>
<li><p>If <var>bodyBytes</var> is null or failure, then return the empty string.</p></li>

<li><p>If <var>response</var>'s <span data-x="concept-response-status">status</span> is not
an <span>ok status</span>, then return the empty string.</p></li>

<li><p>If the result of <span data-x="extract a MIME type">extracting a MIME type</span>
from <var>response</var>'s <span data-x="concept-response-header-list">header list</span>
does not have an <span data-x="MIME type essence">essence</span> of
"<code>application/speculationrules+json</code>", then return the empty string.</p></li>

<li><p>Return the result of <span data-x="UTF-8 decode">UTF-8 decoding</span>
<var>bodyBytes</var>.</p></li>
</ol>
</li>
</ol>

<h5 id="creating-scripts">Creating scripts</h5>

<p>To <dfn data-x="creating a classic script">create a classic script</dfn>, given a
Expand Down