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.

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

WIP: Report resource timing for most HTML elements1 #7147

Closed
wants to merge 2 commits into from

Conversation

noamr
Copy link
Contributor

@noamr noamr commented Oct 3, 2021

Report resource timing for several resources.

Create a reusable function that fetches a resource and reports the
timing when done, given an initiator type.

Implement for the following fetches:

  • link (not including style, yet)
  • script (classic, module, worker, worklet, import)
  • img (src, srcset)
  • input (type=image)
  • Media (audio, video, track, poster)
  • A (download, ping)

TBD:

  • Loading resources from CSS (mostly not in the HTML spec)
  • preload/prefetch/prerender
  • frames/iframes
  • EventSource
  • WebSocket
  • Worklets

See #6542

  • At least two implementers are interested (and none opposed):
    This is already implemented in Chrome, Safari and Firefox, and was previously spec'ed as part of resource timing.
    Some of the specific discrepancies will be handled as part of WPT.

  • Tests are written as part of the resource timing tests. TBD: several detailed test for uncovered specifics.

  • Implementation bugs are filed:

    • Chrome: …
    • Firefox: …
    • Safari: …

(See WHATWG Working Mode: Changes for more details.)


/iframe-embed-object.html ( diff )
/images.html ( diff )
/infrastructure.html ( diff )
/input.html ( diff )
/links.html ( diff )
/media.html ( diff )
/semantics.html ( diff )
/urls-and-fetching.html ( diff )
/webappapis.html ( diff )
/workers.html ( diff )

Create a reusable function that fetches a resource and reports the
timing when done, given an initiator type.

Implement for the following fetches:
- link (not including style, yet)
- script (classic, module, worker, worklet, import)
- img (src, srcset)
- link (type=image)
- Media (audio, video, track, poster)
- A (download, ping)

TBD:
- Loading resources from CSS (mostly not in the HTML spec)
- preload/prefetch/prerender
- frames/iframes (might not be needed, as it's a navigation)

See whatwg#6542
@noamr noamr changed the title Issue 6542 Report resource timing for most HTML elements Oct 3, 2021
@noamr
Copy link
Contributor Author

noamr commented Oct 5, 2021

@domenic, available for an r?

@noamr noamr changed the title Report resource timing for most HTML elements WIP: Report resource timing for most HTML elements1 Oct 7, 2021
Copy link
Collaborator

@yoavweiss yoavweiss left a comment

Choose a reason for hiding this comment

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

Thanks for tackling this. Mostly LG, with corrections on the embed (and maybe object) front.

@@ -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
Collaborator

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.

<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
Collaborator

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)

@noamr
Copy link
Contributor Author

noamr commented Oct 7, 2021

Thanks for tackling this. Mostly LG, with corrections on the embed (and maybe object) front.

Thanks, though actually I might have to revamp. Using processResponseDone is not the right approach, since it's wonky to rely on it for order. Working on an alternate PR.

@noamr
Copy link
Contributor Author

noamr commented Oct 7, 2021

Doing this more gradually, see #7180

@noamr noamr closed this Oct 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants