Skip to content

Commit 0177d4c

Browse files
committed
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 <[email protected]> Reviewed-By: James M Snell <[email protected]>
1 parent 1d3b49e commit 0177d4c

File tree

3 files changed

+20
-3
lines changed

3 files changed

+20
-3
lines changed

doc/api_assets/style.css

+5
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);

tools/doc/allhtml.js

+2-2
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
})

tools/doc/html.js

+13-1
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)