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

doc: optimize HTML rendering #37301

Merged
merged 1 commit into from
Feb 15, 2021
Merged

doc: optimize HTML rendering #37301

merged 1 commit into from
Feb 15, 2021

Conversation

aduh95
Copy link
Contributor

@aduh95 aduh95 commented Feb 9, 2021

Defer rendering sections of docs until they are displayed on the user's screen.

Rendering+painting time of all.html on master is ~1min on my machine:
screenshot of Chrome DevTools Performance tab, rendering time is 53089 ms, painting time is 3491 ms

Rendering+painting time of all.html on this branch is ~1s on my machine:
screenshot of Chrome DevTools Performance tab 937 ms, painting time is 51 ms

This feature is only available for Chromium browsers using version 85+ (https://caniuse.com/?search=content%20visibility), and won't change much for other browsers.

@nodejs-github-bot nodejs-github-bot added doc Issues and PRs related to the documentations. tools Issues and PRs related to the tools directory. labels Feb 9, 2021
RaisinTen
RaisinTen reviewed Feb 10, 2021
View reviewed changes
tools/doc/html.js Outdated Show resolved Hide resolved
RaisinTen
RaisinTen reviewed Feb 10, 2021
View reviewed changes
tools/doc/html.js Outdated Show resolved Hide resolved
@RaisinTen
Copy link
Contributor

Should we use this syntax instead? I'm suggesting this based on the other functions in the file.

@aduh95 aduh95 added the author ready PRs that have at least one approval, no pending requests for changes, and a CI started. label Feb 11, 2021
@nodejs-github-bot
Copy link
Collaborator

CI: https://ci.nodejs.org/job/node-test-pull-request/36057/

@aduh95
doc: optimize HTML rendering
0177d4c 
Defer rendering sections of docs until they are displayed on
the user's screen.

PR-URL: nodejs#37301
Reviewed-By: Darshan Sen <raisinten@gmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
@aduh95 aduh95 force-pushed the doc-content-visibility branch from d226aca to 0177d4c Compare February 15, 2021 15:14
@aduh95
Copy link
Contributor Author

aduh95 commented Feb 15, 2021

Landed in 0177d4c

@aduh95 aduh95 merged commit 0177d4c into nodejs:master Feb 15, 2021
@aduh95 aduh95 deleted the doc-content-visibility branch February 15, 2021 15:15
@Trott
Copy link
Member

Trott commented Feb 16, 2021

This change landed despite a failing Jenkins CI and now Jenkins is broken. This change breaks test/doctool/test-doctool-html.js.

@Trott
Copy link
Member

Trott commented Feb 16, 2021

The fix appears to be just adding <section> tags to the expected results. Going to try to fix it now, but if someone beats me to it, great.

@aduh95
Copy link
Contributor Author

aduh95 commented Feb 16, 2021

@Trott On it.

aduh95 added a commit to aduh95/node that referenced this pull request Feb 16, 2021
@aduh95
test: fix test-doctool-html
384e820 
Refs: nodejs#37301
aduh95 added a commit to aduh95/node that referenced this pull request Feb 16, 2021
@aduh95
test: fix test-doctool-html
abd0147 
Refs: nodejs#37301
@aduh95 aduh95 mentioned this pull request Feb 16, 2021
Merged
@aduh95
Copy link
Contributor Author

aduh95 commented Feb 16, 2021

Isn't it weird the test failure is reported on for Windows CI?

@Trott
Copy link
Member

Trott commented Feb 16, 2021

Isn't it weird the test failure is reported on for Windows CI?

I guess we're only running doctool there? I don't know, that is surprising.

@aduh95
Copy link
Contributor Author

aduh95 commented Feb 16, 2021

Isn't it weird the test failure is reported on for Windows CI?

I guess we're only running doctool there? I don't know, that is surprising.

Attempt to fix that in #37398.

aduh95 added a commit to aduh95/node that referenced this pull request Feb 16, 2021
@aduh95
test: fix test-doctool-html
1c6484b 
Refs: nodejs#37301

PR-URL: nodejs#37397
Reviewed-By: Danielle Adams <adamzdanielle@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Reviewed-By: Darshan Sen <raisinten@gmail.com>
danielleadams pushed a commit that referenced this pull request Feb 16, 2021
@aduh95 @danielleadams
doc: optimize HTML rendering
dd054ca 
Defer rendering sections of docs until they are displayed on
the user's screen.

PR-URL: #37301
Reviewed-By: Darshan Sen <raisinten@gmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
danielleadams pushed a commit that referenced this pull request Feb 16, 2021
@aduh95 @danielleadams
test: fix test-doctool-html
b5692b4 
Refs: #37301

PR-URL: #37397
Reviewed-By: Danielle Adams <adamzdanielle@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Reviewed-By: Darshan Sen <raisinten@gmail.com>
This was referenced Feb 16, 2021
Closed
Merged
@kurtextrem
Copy link

How were the 5000px calculated? (for intrinsic-size)
What happens if content gets larger than that?

@aduh95
Copy link
Contributor Author

aduh95 commented Feb 28, 2021 •
edited
Loading

How were the 5000px calculated? (for intrinsic-size)

It wasn't calculated, it's just a random value which is supposed to be greater than the user screen height.

What happens if content gets larger than that?

Nothing – until the user scrolls near the supposed element position, and the browser will have to render the actual content. The only (I think) visible consequence is the scroll bar doing some weird jumps when scrolling (and the much improved render time of course). You can already check how it performs by visiting https://nodejs.org/api/all.html.

@Trott Trott mentioned this pull request Mar 20, 2021
Merged
targos pushed a commit that referenced this pull request May 1, 2021
@aduh95 @targos
doc: optimize HTML rendering
2a3feff 
Defer rendering sections of docs until they are displayed on
the user's screen.

PR-URL: #37301
Reviewed-By: Darshan Sen <raisinten@gmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
targos pushed a commit that referenced this pull request May 1, 2021
@aduh95 @targos
test: fix test-doctool-html
8386b88 
Refs: #37301

PR-URL: #37397
Reviewed-By: Danielle Adams <adamzdanielle@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Reviewed-By: Darshan Sen <raisinten@gmail.com>
@danielleadams danielleadams mentioned this pull request May 3, 2021
Merged
@aduh95 aduh95 mentioned this pull request Sep 13, 2021
Closed
saltybuckets added a commit to saltybuckets/node that referenced this pull request Sep 25, 2021
@saltybuckets
subsystem:doc
5322a0d 
This pr fixes the jittery scrolling behavior introduced in
nodejs#37301

fix:nodejs#40099
refs:https://infrequently.org/2020/12/resize-resilient-deferred-rendering/
@saltybuckets saltybuckets mentioned this pull request Sep 25, 2021
Closed
@tniessen tniessen mentioned this pull request Feb 6, 2022
Open
This was referenced Jun 29, 2024
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@RaisinTen RaisinTen RaisinTen approved these changes

@jasnell jasnell jasnell approved these changes

Assignees
No one assigned
Labels
author ready PRs that have at least one approval, no pending requests for changes, and a CI started. doc Issues and PRs related to the documentations. tools Issues and PRs related to the tools directory.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@aduh95 @RaisinTen @nodejs-github-bot @Trott @kurtextrem @jasnell