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>

Author: aduh95

doc/api_assets/style.css

@@ -372,6 +372,11 @@ dd + dt.pre {
 #apicontent {
 padding-top:1rem;
 }
+
+#apicontentsection {
+content-visibility: auto;
+contain-intrinsic-size:1px5000px;
+}
 
 #apicontent .line {
 width:calc(50%-1rem);

tools/doc/allhtml.js

@@ -36,8 +36,8 @@ for (const link of toc.match(/<a.*?>/g)) {
 contents+=data.slice(0,match.index)
 .replace(/[\s\S]*?id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*(<ul>\s*)?/,'');
 
-apicontent+=data.slice(match.index+match[0].length)
-.replace(/<!--APIEND-->[\s\S]*/,'')
+apicontent+='<section>'+data.slice(match.index+match[0].length)
+.replace(/<!--APIEND-->[\s\S]*/,'</section>')
 .replace(/<ahref="(\w[^#"]*)#/g,(match,href)=>{
 returnhtmlFiles.includes(href) ? '<a href="#' : match;
 })

tools/doc/html.js

@@ -66,6 +66,18 @@ const gtocHTML = unified()
 consttemplatePath=path.join(docPath,'template.html');
 consttemplate=fs.readFileSync(templatePath,'utf8');
 
+functionwrapSections(content){
+letfirstTime=true;
+returncontent.toString()
+.replace(/<h2/g,(heading)=>{
+if(firstTime){
+firstTime=false;
+return'<section>'+heading;
+}
+return'</section><section>'+heading;
+})+(firstTime ? '' : '</section>');
+}
+
 functiontoHTML({ input, content, filename, nodeVersion, versions }){
 filename=path.basename(filename,'.md');
 
@@ -79,7 +91,7 @@ function toHTML({ input, content, filename, nodeVersion, versions }) {
 .replace('__GTOC__',gtocHTML.replace(
 `class="nav-${id}"`,`class="nav-${id} active"`))
 .replace('__EDIT_ON_GITHUB__',editOnGitHub(filename))
-.replace('__CONTENT__',content.toString());
+.replace('__CONTENT__',wrapSections(content));
 
 constdocCreated=input.match(
 /<!--\s*introduced_in\s*=\s*v([0-9]+)\.([0-9]+)\.[0-9]+\s*-->/);