[Fizz] Optimize end tags chunks (facebook#27522)

yujunjung · AndyPengc12 · commit e7e9d6929a08 · 2024-04-15T09:43:28.000+08:00
Implements `endChunkForTag` to make writing end tags faster
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2509,7 +2509,7 @@ function pushStyleImpl(
     target.push(stringToChunk(escapeTextForBrowser('' + child)));
   }
   pushInnerHTML(target, innerHTML, children);
-  target.push(endTag1, stringToChunk('style'), endTag2);
+  target.push(endChunkForTag('style'));
   return null;
 }
 
@@ -2824,7 +2824,7 @@ function pushTitleImpl(
     target.push(stringToChunk(escapeTextForBrowser('' + child)));
   }
   pushInnerHTML(target, innerHTML, children);
-  target.push(endTag1, stringToChunk('title'), endTag2);
+  target.push(endChunkForTag('title'));
   return null;
 }
 
@@ -3081,7 +3081,7 @@ function pushScriptImpl(
   if (typeof children === 'string') {
     target.push(stringToChunk(encodeHTMLTextNode(children)));
   }
-  target.push(endTag1, stringToChunk('script'), endTag2);
+  target.push(endChunkForTag('script'));
   return null;
 }
 
@@ -3484,8 +3484,15 @@ export function pushStartInstance(
   return pushStartGenericElement(target, props, type);
 }
 
-const endTag1 = stringToPrecomputedChunk('</');
-const endTag2 = stringToPrecomputedChunk('>');
+const endTagCache = new Map<string, PrecomputedChunk>();
+function endChunkForTag(tag: string): PrecomputedChunk {
+  let chunk = endTagCache.get(tag);
+  if (chunk === undefined) {
+    chunk = stringToPrecomputedChunk('</' + tag + '>');
+    endTagCache.set(tag, chunk);
+  }
+  return chunk;
+}
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
@@ -3547,7 +3554,7 @@ export function pushEndInstance(
       }
       break;
   }
-  target.push(endTag1, stringToChunk(type), endTag2);
+  target.push(endChunkForTag(type));
 }
 
 function writeBootstrap(
@@ -4502,9 +4509,7 @@ export function writePreamble(
     // if the main content contained the </head> it would also have provided a
     // <head>. This means that all the content inside <html> is either <body> or
     // invalid HTML
-    writeChunk(destination, endTag1);
-    writeChunk(destination, stringToChunk('head'));
-    writeChunk(destination, endTag2);
+    writeChunk(destination, endChunkForTag('head'));
   }
 }
 
@@ -4577,14 +4582,10 @@ export function writePostamble(
   resumableState: ResumableState,
 ): void {
   if (resumableState.hasBody) {
-    writeChunk(destination, endTag1);
-    writeChunk(destination, stringToChunk('body'));
-    writeChunk(destination, endTag2);
+    writeChunk(destination, endChunkForTag('body'));
   }
   if (resumableState.hasHtml) {
-    writeChunk(destination, endTag1);
-    writeChunk(destination, stringToChunk('html'));
-    writeChunk(destination, endTag2);
+    writeChunk(destination, endChunkForTag('html'));
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -2509,7 +2509,7 @@ function pushStyleImpl(`
`2509`	`2509`	`target.push(stringToChunk(escapeTextForBrowser('' + child)));`
`2510`	`2510`	`}`
`2511`	`2511`	`pushInnerHTML(target, innerHTML, children);`
`2512`		`- target.push(endTag1, stringToChunk('style'), endTag2);`
	`2512`	`+ target.push(endChunkForTag('style'));`
`2513`	`2513`	`return null;`
`2514`	`2514`	`}`
`2515`	`2515`
`@@ -2824,7 +2824,7 @@ function pushTitleImpl(`
`2824`	`2824`	`target.push(stringToChunk(escapeTextForBrowser('' + child)));`
`2825`	`2825`	`}`
`2826`	`2826`	`pushInnerHTML(target, innerHTML, children);`
`2827`		`- target.push(endTag1, stringToChunk('title'), endTag2);`
	`2827`	`+ target.push(endChunkForTag('title'));`
`2828`	`2828`	`return null;`
`2829`	`2829`	`}`
`2830`	`2830`
`@@ -3081,7 +3081,7 @@ function pushScriptImpl(`
`3081`	`3081`	`if (typeof children === 'string') {`
`3082`	`3082`	`target.push(stringToChunk(encodeHTMLTextNode(children)));`
`3083`	`3083`	`}`
`3084`		`- target.push(endTag1, stringToChunk('script'), endTag2);`
	`3084`	`+ target.push(endChunkForTag('script'));`
`3085`	`3085`	`return null;`
`3086`	`3086`	`}`
`3087`	`3087`
`@@ -3484,8 +3484,15 @@ export function pushStartInstance(`
`3484`	`3484`	`return pushStartGenericElement(target, props, type);`
`3485`	`3485`	`}`
`3486`	`3486`
`3487`		`-const endTag1 = stringToPrecomputedChunk('</');`
`3488`		`-const endTag2 = stringToPrecomputedChunk('>');`
	`3487`	`+const endTagCache = new Map<string, PrecomputedChunk>();`
	`3488`	`+function endChunkForTag(tag: string): PrecomputedChunk {`
	`3489`	`+ let chunk = endTagCache.get(tag);`
	`3490`	`+ if (chunk === undefined) {`
	`3491`	`+ chunk = stringToPrecomputedChunk('</' + tag + '>');`
	`3492`	`+ endTagCache.set(tag, chunk);`
	`3493`	`+ }`
	`3494`	`+ return chunk;`
	`3495`	`+}`
`3489`	`3496`
`3490`	`3497`	`export function pushEndInstance(`
`3491`	`3498`	`target: Array<Chunk \| PrecomputedChunk>,`
`@@ -3547,7 +3554,7 @@ export function pushEndInstance(`
`3547`	`3554`	`}`
`3548`	`3555`	`break;`
`3549`	`3556`	`}`
`3550`		`- target.push(endTag1, stringToChunk(type), endTag2);`
	`3557`	`+ target.push(endChunkForTag(type));`
`3551`	`3558`	`}`
`3552`	`3559`
`3553`	`3560`	`function writeBootstrap(`
`@@ -4502,9 +4509,7 @@ export function writePreamble(`
`4502`	`4509`	`// if the main content contained the </head> it would also have provided a`
`4503`	`4510`	`// <head>. This means that all the content inside <html> is either <body> or`
`4504`	`4511`	`// invalid HTML`
`4505`		`- writeChunk(destination, endTag1);`
`4506`		`- writeChunk(destination, stringToChunk('head'));`
`4507`		`- writeChunk(destination, endTag2);`
	`4512`	`+ writeChunk(destination, endChunkForTag('head'));`
`4508`	`4513`	`}`
`4509`	`4514`	`}`
`4510`	`4515`
`@@ -4577,14 +4582,10 @@ export function writePostamble(`
`4577`	`4582`	`resumableState: ResumableState,`
`4578`	`4583`	`): void {`
`4579`	`4584`	`if (resumableState.hasBody) {`
`4580`		`- writeChunk(destination, endTag1);`
`4581`		`- writeChunk(destination, stringToChunk('body'));`
`4582`		`- writeChunk(destination, endTag2);`
	`4585`	`+ writeChunk(destination, endChunkForTag('body'));`
`4583`	`4586`	`}`
`4584`	`4587`	`if (resumableState.hasHtml) {`
`4585`		`- writeChunk(destination, endTag1);`
`4586`		`- writeChunk(destination, stringToChunk('html'));`
`4587`		`- writeChunk(destination, endTag2);`
	`4588`	`+ writeChunk(destination, endChunkForTag('html'));`
`4588`	`4589`	`}`
`4589`	`4590`	`}`
`4590`	`4591`