Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit dd054ca

Browse filesBrowse files
aduh95danielleadams
authored andcommitted
doc: optimize HTML rendering
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>
1 parent c188466 commit dd054ca
Copy full SHA for dd054ca

File tree

Expand file treeCollapse file tree

3 files changed

+20
-3
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

3 files changed

+20
-3
lines changed
Open diff view settings
Collapse file

‎doc/api_assets/style.css‎

Copy file name to clipboardExpand all lines: doc/api_assets/style.css
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,11 @@ dd + dt.pre {
372372
#apicontent {
373373
padding-top: 1rem;
374374
}
375+
376+
#apicontent section {
377+
content-visibility: auto;
378+
contain-intrinsic-size: 1px 5000px;
379+
}
375380

376381
#apicontent .line {
377382
width: calc(50% - 1rem);
Collapse file

‎tools/doc/allhtml.js‎

Copy file name to clipboardExpand all lines: tools/doc/allhtml.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ for (const link of toc.match(/<a.*?>/g)) {
3636
contents += data.slice(0, match.index)
3737
.replace(/[\s\S]*?id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*(<ul>\s*)?/, '');
3838

39-
apicontent += data.slice(match.index + match[0].length)
40-
.replace(/<!-- API END -->[\s\S]*/, '')
39+
apicontent += '<section>' + data.slice(match.index + match[0].length)
40+
.replace(/<!-- API END -->[\s\S]*/, '</section>')
4141
.replace(/<a href="(\w[^#"]*)#/g, (match, href) => {
4242
return htmlFiles.includes(href) ? '<a href="#' : match;
4343
})
Collapse file

‎tools/doc/html.js‎

Copy file name to clipboardExpand all lines: tools/doc/html.js
+13-1Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,18 @@ const gtocHTML = unified()
6666
const templatePath = path.join(docPath, 'template.html');
6767
const template = fs.readFileSync(templatePath, 'utf8');
6868

69+
function wrapSections(content) {
70+
let firstTime = true;
71+
return content.toString()
72+
.replace(/<h2/g, (heading) => {
73+
if (firstTime) {
74+
firstTime = false;
75+
return '<section>' + heading;
76+
}
77+
return '</section><section>' + heading;
78+
}) + (firstTime ? '' : '</section>');
79+
}
80+
6981
function toHTML({ input, content, filename, nodeVersion, versions }) {
7082
filename = path.basename(filename, '.md');
7183

@@ -79,7 +91,7 @@ function toHTML({ input, content, filename, nodeVersion, versions }) {
7991
.replace('__GTOC__', gtocHTML.replace(
8092
`class="nav-${id}"`, `class="nav-${id} active"`))
8193
.replace('__EDIT_ON_GITHUB__', editOnGitHub(filename))
82-
.replace('__CONTENT__', content.toString());
94+
.replace('__CONTENT__', wrapSections(content));
8395

8496
const docCreated = input.match(
8597
/<!--\s*introduced_in\s*=\s*v([0-9]+)\.([0-9]+)\.[0-9]+\s*-->/);

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.