Skip to content
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

Jump to bottom

WIP: Report resource timing for most HTML elements1 #7147

Closed
wants to merge 2 commits into from
Closed

WIP: Report resource timing for most HTML elements1 #7147

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8781994
Report resource timing for default link fetching
noamr Sep 30, 2021
d253dea
Report resource timing for several resources.
noamr Oct 3, 2021
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
103 changes: 69 additions & 34 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2473,6 +2473,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>`<dfn data-x="http-origin" data-x-href="https://fetch.spec.whatwg.org/#http-origin"><code>Origin</code></dfn>` header</li>
<li>`<dfn data-x-href="https://fetch.spec.whatwg.org/#http-cross-origin-resource-policy"><code>Cross-Origin-Resource-Policy</code></dfn>` header</li>
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#process-response">process response</dfn></li>
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#fetch-processresponsedone">processResponseDone</dfn></li>
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#finalize-and-report-timing">finalize and report timing</dfn></li>
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#concept-header-list-get-structured-header">getting a structured field value</dfn></li>
<li><dfn data-x="concept-header-list-set" data-x-href="https://fetch.spec.whatwg.org/#concept-header-list-set">set</dfn></li>
<li><dfn data-x="concept-header-list-get-decode-split" data-x-href="https://fetch.spec.whatwg.org/#concept-header-list-get-decode-split">get, decode, and split</dfn></li>
Expand Down Expand Up @@ -6745,6 +6747,21 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<var>credentialsMode</var>, and whose <span>use-URL-credentials flag</span> is set.</p></li>
</ol>

<p>To <dfn data-x="fetch a resource">fetch a resource</dfn> given
<span data-x="concept-request">request</span> <var>request</var> and
<code data-x="idl-DOMString">DOMString</code> <var>initiatorType</var> (default "other"), perform
the following steps:</p>

<ol>
<li><p>Let <var>handleFetchDone</var> given <span data-x="concept-response">response</span>
<var>response</var> be to
<span data-x="finalize and report timing">finalize and report timing</span> with
<var>response</var>, the <span>current global object</span>, and <var>initiatorType</var>.

<li><p>Return the result of <span data-x="concept-fetch">fetching</span> <var>request</var> with
<span data-x="processResponseDone">processResponseDone</span> set to
<var>handleFetchDone</var>.</p></li>
</ol>

<h4 id="content-type-sniffing">Determining the type of a resource</h4>

Expand Down Expand Up @@ -14020,7 +14037,8 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {

<ol>
<!--FETCH--><li><p>Let <var>response</var> be the result of <span
data-x="concept-fetch">fetching</span> <var>request</var>.</p></li>
data-x="fetch a resource">fetching a resource</span> with <var>request</var> and
"link".</p></li>

<li><p>Let <var>success</var> be true.</p></li>

Expand Down Expand Up @@ -23978,8 +23996,8 @@ document.body.appendChild(wbr);</code></pre>
<span data-x="concept-request-destination">destination</span> is the empty string, and whose
<span>synchronous flag</span> and <span>use-URL-credentials flag</span> are set.</p></li>

<!--FETCH--><li><p>Handle the result of <span data-x="concept-fetch">fetching</span>
<var>request</var> <span>as a download</span>.</p></li>
<!--FETCH--><li><p>Handle the result of <span data-x="fetch a resource">fetching</span>
<var>request</var> with "a" <span>as a download</span>.</p></li>
</ol>
</li>
</ol>
Expand Down Expand Up @@ -24202,7 +24220,8 @@ document.body.appendChild(wbr);</code></pre>
</dl>
</li>

<!--FETCH--><li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>.</p></li>
<!--FETCH--><li><p><span data-x="fetch a resource">Fetch</span> <var>request</var> with
"a".</p></li>
</ol>

<p>This may be done <span>in parallel</span> with the primary fetch, and is independent of the
Expand Down Expand Up @@ -24922,8 +24941,15 @@ document.body.appendChild(wbr);</code></pre>
mode</span> is "<code data-x="">include</code>", and whose <span>use-URL-credentials flag</span>
is set.</p></li>

<!--FETCH--><li><p>Let <var>response</var> be the result of <span
data-x="concept-fetch">fetching</span> <var>request</var>.</p></li>
<!--FETCH-->
<li>
<p>Let <var>response</var> be the result of <span
data-x="fetch a resource">fetching</span> <var>request</var>.</p>

<p class="note">Currently favicon requests are reported to resource timing with
initiator type "other". See
<a href="https://github.com/w3c/resource-timing/issues/298">Resource timing issue #298</a>.</p>
</li>

<li><p>Use <var>response</var>'s <span>unsafe response</span> as an icon as if it had been
declared using the <code data-x="rel-icon">icon</code> keyword.</p></li>
Expand Down Expand Up @@ -28641,9 +28667,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code

<li>
<!--FETCH-->
<p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Let
this instance of the <span data-x="concept-fetch">fetching</span> algorithm be associated with
<var>image request</var>.
<p><i>Fetch the image</i>: <span data-x="fetch a resource">Fetch</span> <var>request</var> with
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it'd be better to indicate in the text that this is calling "fetch a resource" and not "Fetch" (here and elsewhere)

"img". Let this instance of the <span data-x="concept-fetch">fetching</span> algorithm be
associated with <var>image request</var>.
<!-- TODO "Interaction with the Preload Scanner" from the picture spec --></p>

<p>The resource obtained in this fashion, if any, is <var>image request</var>'s <span
Expand Down Expand Up @@ -29454,7 +29480,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
the element's <code data-x="attr-img-referrerpolicy">referrerpolicy</code> attribute.</p></li>

<!--FETCH--><li><p>Let <var>response</var> be the result of <span
data-x="concept-fetch">fetching</span> <var>request</var>.</p></li>
data-x="fetch a resource">fetching</span> <var>request</var> with "img".</p></li>

<li><p>If <var>response</var>'s <span>unsafe response</span> is a <span>network error</span> or
if the image format is unsupported (as determined by applying the <span
Expand Down Expand Up @@ -31879,6 +31905,9 @@ interface <dfn interface>HTMLObjectElement</dfn> : <span>HTMLElement</span> {
<li>
<!--FETCH--><p><span data-x="concept-fetch">Fetch</span> <var>request</var>.</p>

<p class="note"><code>object</code> and <code>embed</code> elements do not report their
resource timing.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is true in most implementations. (at least for embed

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was specified in the Resource Timing spec.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, it wasn't. I don't remember where I got this from.


<!-- similar text in various places -->
<p>Fetching the resource must <span>delay the load event</span> of the element's <span>node
document</span> until the <span data-x="concept-task">task</span> that is <span data-x="queue
Expand Down Expand Up @@ -32508,8 +32537,8 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
data-x="concept-request-credentials-mode">credentials mode</span> is "<code
data-x="">include</code>", and whose <span>use-URL-credentials flag</span> is set.

<!--FETCH--><li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>. This must
<span>delay the load event</span> of the element's <span>node document</span>.</p></li>
<!--FETCH--><li><p><span data-x="fetch a resource">Fetch</span> <var>request</var> with "video".
This must <span>delay the load event</span> of the element's <span>node document</span>.</p></li>

<!-- could define how to sniff for an image here -->

Expand Down Expand Up @@ -34205,7 +34234,7 @@ interface <dfn interface>MediaError</dfn> {
<span>media element</span>'s <span>node document</span>'s <span>relevant settings
object</span>.</p>

<!--FETCH--><p><span data-x="concept-fetch">Fetch</span> <var>request</var>.
<!--FETCH--><p><span data-x="fetch a resource">Fetch</span> <var>request</var> with "audio".

<p>The <var>response</var>'s <span>unsafe response</span> obtained in this fashion, if any,
contains the <span>media data</span>. It can be <span>CORS-same-origin</span> or
Expand Down Expand Up @@ -37476,7 +37505,8 @@ interface <dfn interface>VideoTrack</dfn> {
<code>track</code> element's <span>node document</span>'s <span>relevant settings
object</span>.</p></li>

<!--FETCH--><li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>.</p></li>
<!--FETCH--><li><p><span data-x="fetch a resource">Fetch</span> <var>request</var> with
"track".</p></li>
</ol>

<p>The <span data-x="concept-task">tasks</span> <span data-x="queue a task">queued</span> by the
Expand Down Expand Up @@ -48474,7 +48504,8 @@ ldh-str = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
data-x="concept-request-credentials-mode">credentials mode</span> is "<code
data-x="">include</code>", and whose <span>use-URL-credentials flag</span> is set.</p></li>

<!--FETCH--><li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>.</p></li>
<!--FETCH--><li><p><span data-x="fetch a resource">Fetch</span> <var>request</var> with
"input".</p></li>
</ol>

<!-- same text in <img> section and similar text elsewhere -->
Expand Down Expand Up @@ -90686,10 +90717,11 @@ document.querySelector("button").addEventListener("click", bound);

<div class="note">
<p>By default, not supplying the <span data-x="fetching-scripts-perform-fetch">perform the
fetch</span> will cause the below algorithms to simply <span data-x="concept-fetch">fetch</span>
the given <span data-x="concept-request">request</span>, with algorithm-specific customizations
to the <span data-x="concept-request">request</span> and validations of the resulting <span
data-x="concept-response">response</span>.</p>
fetch</span> will cause the below algorithms to simply
<span data-x="fetch a resource">fetch</span> the given
<span data-x="concept-request">request</span> with "script", with algorithm-specific
customizations to the <span data-x="concept-request">request</span> and validations of the
resulting <span data-x="concept-response">response</span>.</p>

<p>To layer your own customizations on top of these algorithm-specific ones, supply a <span
data-x="fetching-scripts-perform-fetch">perform the fetch</span> hook that modifies the given
Expand Down Expand Up @@ -90735,8 +90767,8 @@ document.querySelector("button").addEventListener("click", bound);
complete with <span data-x="concept-response">response</span> <var>response</var>, run the
remaining steps.</p>

<p>Otherwise, <span data-x="concept-fetch">fetch</span> <var>request</var>. Return from this
algorithm, and run the remaining steps as part of the fetch's <span>process response</span> for
<p>Otherwise, <span data-x="fetch a resource">fetch</span> <var>request</var> with "script".
Return from this algorithm, and run the remaining steps as part of the fetch's <span>process response</span> for
the <span data-x="concept-response">response</span> <var>response</var>.</p>

<p class="note"><var>response</var> can be either <span>CORS-same-origin</span> or
Expand Down Expand Up @@ -90804,9 +90836,10 @@ document.querySelector("button").addEventListener("click", bound);
complete with <span data-x="concept-response">response</span> <var>response</var>, run the
remaining steps.</p>

<p>Otherwise, <span data-x="concept-fetch">fetch</span> <var>request</var>. Return from this
algorithm, and run the remaining steps as part of the fetch's <span>process response</span> for
the <span data-x="concept-response">response</span> <var>response</var>.</p>
<p>Otherwise, <span data-x="fetch a resource">fetch</span> <var>request</var> with "script".
Return from this algorithm, and run the remaining steps as part of the fetch's
<span>process response</span> for the <span data-x="concept-response">response</span>
<var>response</var>.</p>
</li>

<li><p>Set <var>response</var> to <var>response</var>'s <span>unsafe response</span>.</p></li>
Expand Down Expand Up @@ -90874,8 +90907,8 @@ document.querySelector("button").addEventListener("click", bound);
data-x="fetching-scripts-is-top-level">is top-level</var> flag set. Let <var>response</var> be
the result.</p>

<p>Otherwise, <span data-x="concept-fetch">fetch</span> <var>request</var>, and let
<var>response</var> be the result.</p>
<p>Otherwise, <span data-x="fetch a resource">fetch</span> <var>request</var> given "script",
and let <var>response</var> be the result.</p>

<p class="note">Unlike other algorithms in this section, the fetching process is synchronous
here. Thus any <span data-x="fetching-scripts-perform-fetch">perform the fetch</span> steps will
Expand Down Expand Up @@ -91078,8 +91111,9 @@ document.querySelector("button").addEventListener("click", bound);
"<code data-x="">fetching</code>".</p></li>

<li>
<p><span data-x="concept-fetch">Fetch</span> <var>request</var>. To <span>process
response</span> for the <span data-x="concept-response">response</span> <var>response</var>:</p>
<p><span data-x="fetch a resource">Fetch</span> <var>request</var> with "script". To
<span>process response</span> for the <span data-x="concept-response">response</span>
<var>response</var>:</p>

<ol>
<li><p>Set <var>moduleResponsesMap</var>[<var>requestURL</var>] to
Expand Down Expand Up @@ -91495,9 +91529,10 @@ document.querySelector("button").addEventListener("click", bound);
data-x="fetching-scripts-perform-fetch">perform the fetch</span> steps complete with <span
data-x="concept-response">response</span> <var>response</var>, run the remaining steps.</p>

<p>Otherwise, <span data-x="concept-fetch">fetch</span> <var>request</var>. Return from this
algorithm, and run the remaining steps as part of the fetch's <span>process response</span> for
the <span data-x="concept-response">response</span> <var>response</var>.</p>
<p>Otherwise, <span data-x="fetch a resource">fetch</span> <var>request</var> with "script".
Return from this algorithm, and run the remaining steps as part of the fetch's
<span>process response</span> for the <span data-x="concept-response">response</span>
<var>response</var>.</p>

<p class="note"><var>response</var> is always <span>CORS-same-origin</span>.</p>
</li>
Expand Down Expand Up @@ -102066,9 +102101,9 @@ interface <dfn interface>SharedWorkerGlobalScope</dfn> : <span>WorkerGlobalScope
<li>Set <var>request</var>'s <span data-x="concept-request-reserved-client">reserved
client</span> to <var>inside settings</var>.</li>

<li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>, and asynchronously wait
to run the remaining steps as part of fetch's <span>process response</span> for the <span
data-x="concept-response">response</span> <var>response</var>.</p></li>
<li><p><span data-x="fetch a resource">Fetch</span> <var>request</var> with "script", and
asynchronously wait to run the remaining steps as part of fetch's <span>process response</span>
for the <span data-x="concept-response">response</span> <var>response</var>.</p></li>

<li><p>Set <var>worker global scope</var>'s <span
data-x="concept-WorkerGlobalScope-url">url</span> to <var>response</var>'s <span
Expand Down