improve clearing perf by not checking react ownership in singletons a…

…nd resource ownership in container
facebook · Oct 21, 2022 · 2d9d0ca · 2d9d0ca
1 parent 5d7bac0
commit 2d9d0ca
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 16 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -745,6 +745,9 @@ export function clearContainer(container: Container): void {
 function clearContainerChildren(container: Node) {
   let node;
   let nextNode: ?Node = container.firstChild;
+  if (nextNode && nextNode.nodeType === DOCUMENT_TYPE_NODE) {
+    nextNode = nextNode.nextSibling;
+  }
   while (nextNode) {
     node = nextNode;
     nextNode = nextNode.nextSibling;
@@ -770,11 +773,7 @@ function clearContainerChildren(container: Node) {
         }
       }
     }
-    if (node.nodeType === DOCUMENT_TYPE_NODE || isMarkedResource(node)) {
-      // we retain document nodes and resources
-    } else {
-      container.removeChild(node);
-    }
+    container.removeChild(node);
   }
   return;
 }
@@ -1674,10 +1673,8 @@ export function clearSingleton(instance: Instance): void {
   while (node) {
     const nextNode = node.nextSibling;
     const nodeName = node.nodeName;
-    if (getInstanceFromNodeDOMTree(node) || isMarkedResource(node)) {
-      // retain nodes owned by React
-    } else if (
-      nodeName === 'TITLE' ||
+    if (
+      isMarkedResource(node) ||
       nodeName === 'HEAD' ||
       nodeName === 'BODY' ||
       nodeName === 'STYLE' ||

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -235,6 +235,32 @@ describe('ReactDOMFloat', () => {
     return readText(text);
   }
 
+  // @gate enableFloat
+  it('can render resources before singletons', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <>
+        <title>foo</title>
+        <html>
+          <head>
+            <link rel="foo" href="foo" />
+          </head>
+          <body>hello world</body>
+        </html>
+      </>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <title>foo</title>
+          <link rel="foo" href="foo" />
+        </head>
+        <body>hello world</body>
+      </html>,
+    );
+  });
+
   // @gate enableFloat
   it('can acquire a resource after releasing it in the same commit', async () => {
     const root = ReactDOMClient.createRoot(container);
@@ -1208,7 +1234,6 @@ describe('ReactDOMFloat', () => {
         <html>
           <head>
             <link rel="stylesheet" href="aresource" data-precedence="foo" />
-            <link rel="preload" href="aresource" as="style" />
           </head>
           <body>
             <div>hello world</div>
@@ -1372,7 +1397,6 @@ describe('ReactDOMFloat', () => {
         <html>
           <head>
             <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <link rel="preload" href="foo" as="style" />
           </head>
           <body>hello world</body>
         </html>,
@@ -1425,7 +1449,6 @@ describe('ReactDOMFloat', () => {
             <link rel="stylesheet" href="foo" data-precedence="foo" />
             <link rel="stylesheet" href="bar" data-precedence="bar" />
             <link rel="stylesheet" href="qux" data-precedence="qux" />
-            <link rel="preload" href="qux" as="style" />
           </head>
           <body>client</body>
         </html>,
@@ -1503,8 +1526,6 @@ describe('ReactDOMFloat', () => {
           <head>
             <link rel="stylesheet" href="foo" data-precedence="foo" />
             <link rel="stylesheet" href="bar" data-precedence="bar" />
-            <link rel="preload" href="foo" as="style" />
-            <link rel="preload" href="bar" as="style" />
           </head>
           <body>hello</body>
         </html>,
@@ -1530,8 +1551,6 @@ describe('ReactDOMFloat', () => {
             <link rel="stylesheet" href="foo" data-precedence="foo" />
             <link rel="stylesheet" href="bar" data-precedence="bar" />
             <link rel="stylesheet" href="baz" data-precedence="baz" />
-            <link rel="preload" href="foo" as="style" />
-            <link rel="preload" href="bar" as="style" />
             <link rel="preload" href="baz" as="style" />
           </head>
           <body>hello</body>