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

Rewrite PerformanceNavigationTiming pages #22683

Merged
merged 4 commits into from
Dec 5, 2022
Merged

Conversation

Elchi3
Copy link
Member

@Elchi3 Elchi3 commented Dec 2, 2022

Description

This PR rewrites the Navigation Timing pages to mainly provide more useful code examples. Much like for Resource Timing I'm also adding the spec's diagram here, as I think it is useful to see where the individual timestamps sit in the overall process.

Motivation

openwebdocs/project#62

Additional details

I wasn't quite sure what to demo for the domInteractive and domComplete properties, so these examples just log out the value (lame).

I think you could show the following things, but I wasn't sure if they are good ideas.

Measuring DOM construction time: domInteractive - responseEnd
Measuring DOM resources processing time: domComplete - domInteractive
Checking if there is parser-blocking JavaScript? domContentLoadedEventStart !== dominteractive

Related issues and pull requests

None.

@Elchi3 Elchi3 requested a review from a team as a code owner December 2, 2022 18:05
@Elchi3 Elchi3 requested review from wbamberg and removed request for a team December 2, 2022 18:05
@github-actions github-actions bot added the Content:WebAPI Web API docs label Dec 2, 2022
Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

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

I hope this is helpful!

There are a few repeated patterns here that we might look at:

  • circuitous language like "a timestamp representing the time value equal to the time immediately after..." where I think "a timestamp representing the time immediately after.."
  • some language about "events completing" which could be "event handlers completing" (AFAICT)
  • using performance observers instead of getEntriesByType, but noting that we should pass buffered as an option
  • again circuitous language like "the user agent sets the current document readiness of the current document to interactive." where something like "the user agent sets the document's readyState to "interactive"" seems clearer and more concise.

files/en-us/web/api/performancenavigationtiming/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/performancenavigationtiming/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/performancenavigationtiming/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/performancenavigationtiming/index.md Outdated Show resolved Hide resolved
Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

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

👍 thank you Florian, looks great :)

@wbamberg wbamberg merged commit 8eb6168 into mdn:main Dec 5, 2022
@Elchi3 Elchi3 deleted the navigation-timing branch December 6, 2022 11:04
hamishwillee pushed a commit to hamishwillee/content that referenced this pull request Dec 12, 2022
* Rewrite PerformanceNavigationTiming pages

* Apply suggestions from code review

Co-authored-by: wbamberg <[email protected]>

* Update descriptions & use event handler throughout

* Add PerformanceObserver examples

Co-authored-by: wbamberg <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:WebAPI Web API docs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants