Skip to content

Commit

Permalink
Slightly improve performance of hydration. (#15998)
Browse files Browse the repository at this point in the history
* Slightly improve performance of hydration.

Avoid loading nodeType and data couple times from the same node in a row,
but instead load them only once, which will help engines to run this code
faster, especially during startup of the application. The general approach
is still not ideal, since hydrating this way forces the browser engine
to materialize JavaScript wrapper objects for all DOM nodes, even if they
are not interesting to hydration itself.

* Fix condition for COMMENT_NODEs.

* Improve general code readability
  • Loading branch information
bmeurer authored and sebmarkbage committed Jun 27, 2019
1 parent 824e9be commit 915dfe6
Showing 1 changed file with 26 additions and 30 deletions.
56 changes: 26 additions & 30 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
Expand Up @@ -670,44 +670,40 @@ export function registerSuspenseInstanceRetry(
instance._reactRetry = callback;
}

export function getNextHydratableSibling(
instance: HydratableInstance,
): null | HydratableInstance {
let node = instance.nextSibling;
function getNextHydratable(node) {
// Skip non-hydratable nodes.
while (
node &&
node.nodeType !== ELEMENT_NODE &&
node.nodeType !== TEXT_NODE &&
(!enableSuspenseServerRenderer ||
node.nodeType !== COMMENT_NODE ||
((node: any).data !== SUSPENSE_START_DATA &&
(node: any).data !== SUSPENSE_PENDING_START_DATA &&
(node: any).data !== SUSPENSE_FALLBACK_START_DATA))
) {
node = node.nextSibling;
for (; node != null; node = node.nextSibling) {
const nodeType = node.nodeType;
if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
break;
}
if (enableSuspenseServerRenderer) {
if (nodeType === COMMENT_NODE) {
break;
}
const nodeData = (node: any).data;
if (
nodeData === SUSPENSE_START_DATA ||
nodeData === SUSPENSE_FALLBACK_START_DATA ||
nodeData === SUSPENSE_PENDING_START_DATA
) {
break;
}
}
}
return (node: any);
}

export function getNextHydratableSibling(
instance: HydratableInstance,
): null | HydratableInstance {
return getNextHydratable(instance.nextSibling);
}

export function getFirstHydratableChild(
parentInstance: Container | Instance,
): null | HydratableInstance {
let next = parentInstance.firstChild;
// Skip non-hydratable nodes.
while (
next &&
next.nodeType !== ELEMENT_NODE &&
next.nodeType !== TEXT_NODE &&
(!enableSuspenseServerRenderer ||
next.nodeType !== COMMENT_NODE ||
((next: any).data !== SUSPENSE_START_DATA &&
(next: any).data !== SUSPENSE_FALLBACK_START_DATA &&
(next: any).data !== SUSPENSE_PENDING_START_DATA))
) {
next = next.nextSibling;
}
return (next: any);
return getNextHydratable(parentInstance.firstChild);
}

export function hydrateInstance(
Expand Down

0 comments on commit 915dfe6

Please sign in to comment.