From dd054ca37fc2c91a3a5ba34ef73c54d60539fc6d Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 9 Feb 2021 22:41:47 +0100
Subject: [PATCH] doc: optimize HTML rendering

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

PR-URL: https://github.com/nodejs/node/pull/37301
Reviewed-By: Darshan Sen <raisinten@gmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
---
 doc/api_assets/style.css |  5 +++++
 tools/doc/allhtml.js     |  4 ++--
 tools/doc/html.js        | 14 +++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index d2e79444a93558..e1538d962e2545 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -372,6 +372,11 @@ dd + dt.pre {
 #apicontent {
   padding-top: 1rem;
 }
+  
+#apicontent section {
+  content-visibility: auto;
+  contain-intrinsic-size: 1px 5000px;
+}
 
 #apicontent .line {
   width: calc(50% - 1rem);
diff --git a/tools/doc/allhtml.js b/tools/doc/allhtml.js
index 93197f812e10c6..fad74e59d5cb2e 100644
--- a/tools/doc/allhtml.js
+++ b/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(/<!-- API END -->[\s\S]*/, '')
+  apicontent += '<section>' + data.slice(match.index + match[0].length)
+    .replace(/<!-- API END -->[\s\S]*/, '</section>')
     .replace(/<a href="(\w[^#"]*)#/g, (match, href) => {
       return htmlFiles.includes(href) ? '<a href="#' : match;
     })
diff --git a/tools/doc/html.js b/tools/doc/html.js
index 07a3e5ef405403..b519fd9c5a805b 100644
--- a/tools/doc/html.js
+++ b/tools/doc/html.js
@@ -66,6 +66,18 @@ const gtocHTML = unified()
 const templatePath = path.join(docPath, 'template.html');
 const template = fs.readFileSync(templatePath, 'utf8');
 
+function wrapSections(content) {
+  let firstTime = true;
+  return content.toString()
+    .replace(/<h2/g, (heading) => {
+      if (firstTime) {
+        firstTime = false;
+        return '<section>' + heading;
+      }
+      return '</section><section>' + heading;
+    }) + (firstTime ? '' : '</section>');
+}
+
 function toHTML({ 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));
 
   const docCreated = input.match(
     /<!--\s*introduced_in\s*=\s*v([0-9]+)\.([0-9]+)\.[0-9]+\s*-->/);