Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve place child #4172

Merged
merged 4 commits into from
Oct 28, 2023
Merged

Improve place child #4172

merged 4 commits into from
Oct 28, 2023

Conversation

andrewiggins
Copy link
Member

@andrewiggins andrewiggins commented Oct 26, 2023

NOTE: Might be easier to review by adding ?w=1 to the URL

When unmounting DOM, we need to move oldDom/_nextDom past the unmounted DOM so the diff can continue by comparing the next VNodes to DOM nodes that are mounted. We did this in the unmount loop but we missed a couple other places where this needs to happen as well.

Let's say we have the following components:

function Conditional({ condition }) {
  return condition ? (
      <>
        <p>2</p>
        <p>3</p>
      </>
    ) : null;
  }

function App() { return <>... <Conditional/> ... </>; }

Here, Conditional will switch from a group of DOM nodes and null. When doing this, diffChildren would hit our null placeholder code which does update oldDom past the unmounted DOM, but it doesn't update _nextDom, so App wouldn't see this move and try to continue diffing from an unmounted DOM node.

Further, even if we set _nextDOM, diffChildren on App wouldn't see it because Conditional returned null. Since Conditional returned null, it would return null for newDom, meaning diffChildren on App would skip over all the code that was previously under a if (newDom) check, including the code that reads _nextDom. This PR also fixes that issue so even if a component returns null, we update the skewed index, and will read _nextDom if necessary.

Also, the test "should efficiently unmount & mount components that conditionally return null with null first child" contains an additional edge case where Conditional switching to null, matches it's previous null first child. We need to ensure we detect we still need to move oldDom and update _nextDom.

Previously we attempted to handle all of these cases by checking oldDom.parentNode !== parentDom in placeChild. However, in our entire test case, this was only occurred when oldDom was unmounted. So this update prevents unmounted oldDom from ever reaching placeChild removing the need for that condition entirely, dramatically simplifying placeChild.

@github-actions
Copy link

github-actions bot commented Oct 26, 2023

📊 Tachometer Benchmark Results

Summary

duration

  • 02_replace1k: unsure 🔍 -2% - +4% (-2.34ms - +4.62ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -2% - +6% (-0.59ms - +1.94ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 -1% - +1% (-6.93ms - +5.69ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -3% - +3% (-0.77ms - +0.86ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -1% - +1% (-1.36ms - +0.73ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 -6% - +3% (-2.36ms - +1.01ms)
    preact-local vs preact-main
  • text_update: unsure 🔍 -5% - +7% (-0.20ms - +0.28ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -1% - +3% (-0.69ms - +1.51ms)
    preact-local vs preact-main

usedJSHeapSize

  • 02_replace1k: unsure 🔍 -0% - +0% (-0.01ms - +0.00ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -0% - +2% (-0.00ms - +0.03ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -0% - -0% (-0.01ms - -0.00ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 -0% - +1% (-0.01ms - +0.04ms)
    preact-local vs preact-main
  • text_update: unsure 🔍 -2% - +3% (-0.01ms - +0.02ms)
    preact-local vs preact-main
  • todo: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main

Results

02_replace1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main119.76ms - 123.95ms-unsure 🔍
-4% - +2%
-4.62ms - +2.34ms
unsure 🔍
-0% - +4%
-0.18ms - +5.29ms
preact-local120.22ms - 125.77msunsure 🔍
-2% - +4%
-2.34ms - +4.62ms
-slower ❌
0% - 6%
0.41ms - 6.98ms
preact-hooks117.54ms - 121.05msunsure 🔍
-4% - +0%
-5.29ms - +0.18ms
faster ✔
0% - 6%
0.41ms - 6.98ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.31ms - 3.33ms-unsure 🔍
-0% - +0%
-0.00ms - +0.01ms
faster ✔
0% - 1%
0.01ms - 0.02ms
preact-local3.31ms - 3.32msunsure 🔍
-0% - +0%
-0.01ms - +0.00ms
-faster ✔
1% - 1%
0.02ms - 0.03ms
preact-hooks3.33ms - 3.34msslower ❌
0% - 1%
0.01ms - 0.02ms
slower ❌
1% - 1%
0.02ms - 0.03ms
-

run-warmup-0

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main46.60ms - 48.86ms-faster ✔
0% - 7%
0.05ms - 3.46ms
faster ✔
1% - 8%
0.58ms - 3.82ms
preact-local48.21ms - 50.76msslower ❌
0% - 7%
0.05ms - 3.46ms
-unsure 🔍
-4% - +3%
-2.17ms - +1.28ms
preact-hooks48.77ms - 51.09msslower ❌
1% - 8%
0.58ms - 3.82ms
unsure 🔍
-3% - +4%
-1.28ms - +2.17ms
-

run-warmup-1

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main57.93ms - 59.84ms-unsure 🔍
-2% - +2%
-1.41ms - +1.43ms
faster ✔
0% - 5%
0.01ms - 3.22ms
preact-local57.82ms - 59.92msunsure 🔍
-2% - +2%
-1.43ms - +1.41ms
-unsure 🔍
-5% - +0%
-3.30ms - +0.03ms
preact-hooks59.21ms - 61.79msunsure 🔍
-0% - +6%
+0.01ms - +3.22ms
unsure 🔍
-0% - +6%
-0.03ms - +3.30ms
-

run-warmup-2

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main48.88ms - 50.96ms-unsure 🔍
-3% - +3%
-1.69ms - +1.72ms
unsure 🔍
-4% - +2%
-1.79ms - +1.02ms
preact-local48.55ms - 51.26msunsure 🔍
-3% - +3%
-1.72ms - +1.69ms
-unsure 🔍
-4% - +2%
-2.05ms - +1.25ms
preact-hooks49.36ms - 51.25msunsure 🔍
-2% - +4%
-1.02ms - +1.79ms
unsure 🔍
-3% - +4%
-1.25ms - +2.05ms
-

run-warmup-3

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main40.87ms - 42.12ms-unsure 🔍
-1% - +3%
-0.35ms - +1.25ms
unsure 🔍
-5% - +1%
-1.92ms - +0.46ms
preact-local40.55ms - 41.55msunsure 🔍
-3% - +1%
-1.25ms - +0.35ms
-faster ✔
0% - 5%
0.05ms - 2.30ms
preact-hooks41.22ms - 43.23msunsure 🔍
-1% - +5%
-0.46ms - +1.92ms
slower ❌
0% - 6%
0.05ms - 2.30ms
-

run-warmup-4

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main57.82ms - 63.87ms-unsure 🔍
-8% - +6%
-4.75ms - +3.81ms
faster ✔
1% - 13%
0.65ms - 8.55ms
preact-local58.28ms - 64.35msunsure 🔍
-6% - +8%
-3.81ms - +4.75ms
-faster ✔
0% - 12%
0.17ms - 8.09ms
preact-hooks62.90ms - 67.99msslower ❌
1% - 14%
0.65ms - 8.55ms
slower ❌
0% - 13%
0.17ms - 8.09ms
-

run-final

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main34.37ms - 37.36ms-unsure 🔍
-9% - +4%
-3.40ms - +1.47ms
unsure 🔍
-3% - +6%
-1.14ms - +2.25ms
preact-local34.90ms - 38.75msunsure 🔍
-4% - +10%
-1.47ms - +3.40ms
-unsure 🔍
-2% - +10%
-0.57ms - +3.60ms
preact-hooks34.51ms - 36.11msunsure 🔍
-6% - +3%
-2.25ms - +1.14ms
unsure 🔍
-10% - +1%
-3.60ms - +0.57ms
-
03_update10th1k_x16

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main33.26ms - 34.96ms-unsure 🔍
-6% - +2%
-1.94ms - +0.59ms
unsure 🔍
-5% - +2%
-1.77ms - +0.77ms
preact-local33.85ms - 35.73msunsure 🔍
-2% - +6%
-0.59ms - +1.94ms
-unsure 🔍
-3% - +4%
-1.16ms - +1.51ms
preact-hooks33.67ms - 35.55msunsure 🔍
-2% - +5%
-0.77ms - +1.77ms
unsure 🔍
-4% - +3%
-1.51ms - +1.16ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.28ms - 3.29ms-unsure 🔍
-0% - +0%
-0.01ms - +0.01ms
faster ✔
0% - 1%
0.01ms - 0.02ms
preact-local3.28ms - 3.29msunsure 🔍
-0% - +0%
-0.01ms - +0.01ms
-faster ✔
0% - 1%
0.01ms - 0.02ms
preact-hooks3.30ms - 3.30msslower ❌
0% - 1%
0.01ms - 0.02ms
slower ❌
0% - 1%
0.01ms - 0.02ms
-
07_create10k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1128.19ms - 1137.49ms-unsure 🔍
-1% - +1%
-5.69ms - +6.93ms
unsure 🔍
-1% - +0%
-9.54ms - +3.24ms
preact-local1127.96ms - 1136.49msunsure 🔍
-1% - +1%
-6.93ms - +5.69ms
-unsure 🔍
-1% - +0%
-9.88ms - +2.35ms
preact-hooks1131.61ms - 1140.37msunsure 🔍
-0% - +1%
-3.24ms - +9.54ms
unsure 🔍
-0% - +1%
-2.35ms - +9.88ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main26.32ms - 26.32ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms
unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-local26.32ms - 26.32msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms
-unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-hooks26.34ms - 26.34msunsure 🔍
+0% - +0%
+0.02ms - +0.02ms
unsure 🔍
+0% - +0%
+0.02ms - +0.02ms
-
filter_list

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main29.56ms - 30.85ms-unsure 🔍
-3% - +3%
-0.86ms - +0.77ms
unsure 🔍
-6% - +1%
-1.80ms - +0.28ms
preact-local29.75ms - 30.75msunsure 🔍
-3% - +3%
-0.77ms - +0.86ms
-unsure 🔍
-5% - +1%
-1.68ms - +0.24ms
preact-hooks30.15ms - 31.78msunsure 🔍
-1% - +6%
-0.28ms - +1.80ms
unsure 🔍
-1% - +6%
-0.24ms - +1.68ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1.34ms - 1.36ms-unsure 🔍
-2% - +0%
-0.03ms - +0.00ms
faster ✔
2% - 4%
0.03ms - 0.06ms
preact-local1.35ms - 1.38msunsure 🔍
-0% - +2%
-0.00ms - +0.03ms
-faster ✔
1% - 3%
0.01ms - 0.05ms
preact-hooks1.38ms - 1.41msslower ❌
2% - 5%
0.03ms - 0.06ms
slower ❌
1% - 3%
0.01ms - 0.05ms
-
hydrate1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main121.17ms - 122.70ms-unsure 🔍
-1% - +1%
-0.73ms - +1.36ms
unsure 🔍
-2% - +2%
-2.92ms - +1.94ms
preact-local120.91ms - 122.33msunsure 🔍
-1% - +1%
-1.36ms - +0.73ms
-unsure 🔍
-3% - +1%
-3.22ms - +1.61ms
preact-hooks120.12ms - 124.73msunsure 🔍
-2% - +2%
-1.94ms - +2.92ms
unsure 🔍
-1% - +3%
-1.61ms - +3.22ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main6.12ms - 6.12ms-unsure 🔍
+0% - +0%
+0.00ms - +0.01ms
unsure 🔍
-0% - -0%
-0.03ms - -0.02ms
preact-local6.11ms - 6.12msunsure 🔍
-0% - -0%
-0.01ms - -0.00ms
-faster ✔
0% - 1%
0.02ms - 0.03ms
preact-hooks6.14ms - 6.15msunsure 🔍
+0% - +0%
+0.02ms - +0.03ms
slower ❌
0% - 1%
0.02ms - 0.03ms
-
many_updates

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main35.41ms - 38.38ms-unsure 🔍
-3% - +7%
-1.01ms - +2.36ms
unsure 🔍
-9% - +1%
-3.57ms - +0.34ms
preact-local35.42ms - 37.02msunsure 🔍
-6% - +3%
-2.36ms - +1.01ms
-faster ✔
2% - 10%
0.79ms - 3.80ms
preact-hooks37.24ms - 39.79msunsure 🔍
-1% - +10%
-0.34ms - +3.57ms
slower ❌
2% - 11%
0.79ms - 3.80ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main4.48ms - 4.52ms-unsure 🔍
-1% - +0%
-0.04ms - +0.01ms
faster ✔
0% - 1%
0.00ms - 0.05ms
preact-local4.50ms - 4.53msunsure 🔍
-0% - +1%
-0.01ms - +0.04ms
-unsure 🔍
-1% - +0%
-0.03ms - +0.01ms
preact-hooks4.51ms - 4.54msslower ❌
0% - 1%
0.00ms - 0.05ms
unsure 🔍
-0% - +1%
-0.01ms - +0.03ms
-
text_update

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.72ms - 4.06ms-unsure 🔍
-7% - +5%
-0.28ms - +0.20ms
faster ✔
2% - 14%
0.09ms - 0.59ms
preact-local3.76ms - 4.10msunsure 🔍
-5% - +7%
-0.20ms - +0.28ms
-faster ✔
1% - 13%
0.05ms - 0.55ms
preact-hooks4.04ms - 4.41msslower ❌
2% - 15%
0.09ms - 0.59ms
slower ❌
1% - 14%
0.05ms - 0.55ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.64ms - 0.67ms-unsure 🔍
-3% - +2%
-0.02ms - +0.01ms
unsure 🔍
-5% - +1%
-0.03ms - +0.01ms
preact-local0.65ms - 0.67msunsure 🔍
-2% - +3%
-0.01ms - +0.02ms
-unsure 🔍
-4% - +2%
-0.03ms - +0.01ms
preact-hooks0.65ms - 0.68msunsure 🔍
-1% - +5%
-0.01ms - +0.03ms
unsure 🔍
-2% - +4%
-0.01ms - +0.03ms
-
todo

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main55.11ms - 56.54ms-unsure 🔍
-3% - +1%
-1.51ms - +0.69ms
faster ✔
1% - 4%
0.38ms - 2.34ms
preact-local55.39ms - 57.07msunsure 🔍
-1% - +3%
-0.69ms - +1.51ms
-unsure 🔍
-4% - +0%
-2.03ms - +0.12ms
preact-hooks56.52ms - 57.86msslower ❌
1% - 4%
0.38ms - 2.34ms
unsure 🔍
-0% - +4%
-0.12ms - +2.03ms
-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.78ms - 0.78ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms
faster ✔
3% - 3%
0.03ms - 0.03ms
preact-local0.78ms - 0.78msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms
-faster ✔
3% - 3%
0.02ms - 0.03ms
preact-hooks0.80ms - 0.80msslower ❌
3% - 3%
0.03ms - 0.03ms
slower ❌
3% - 3%
0.02ms - 0.03ms
-

tachometer-reporter-action v2 for Benchmarks

@coveralls
Copy link

coveralls commented Oct 26, 2023

Coverage Status

coverage: 99.426%. remained the same when pulling 137da3c on improve-place-child into 8e5eac5 on main.

@github-actions
Copy link

github-actions bot commented Oct 26, 2023

Size Change: -66 B (0%)

Total Size: 57.2 kB

Filename Size Change
dist/preact.js 4.42 kB -11 B (0%)
dist/preact.min.js 4.45 kB -11 B (0%)
dist/preact.min.module.js 4.45 kB -12 B (0%)
dist/preact.min.umd.js 4.48 kB -10 B (0%)
dist/preact.module.js 4.45 kB -11 B (0%)
dist/preact.umd.js 4.48 kB -11 B (0%)
ℹ️ View Unchanged
Filename Size Change
compat/dist/compat.js 3.95 kB 0 B
compat/dist/compat.module.js 3.87 kB 0 B
compat/dist/compat.umd.js 4.01 kB 0 B
debug/dist/debug.js 3.5 kB 0 B
debug/dist/debug.module.js 3.5 kB 0 B
debug/dist/debug.umd.js 3.58 kB 0 B
devtools/dist/devtools.js 231 B 0 B
devtools/dist/devtools.module.js 240 B 0 B
devtools/dist/devtools.umd.js 315 B 0 B
hooks/dist/hooks.js 1.53 kB 0 B
hooks/dist/hooks.module.js 1.56 kB 0 B
hooks/dist/hooks.umd.js 1.62 kB 0 B
jsx-runtime/dist/jsxRuntime.js 365 B 0 B
jsx-runtime/dist/jsxRuntime.module.js 331 B 0 B
jsx-runtime/dist/jsxRuntime.umd.js 445 B 0 B
test-utils/dist/testUtils.js 453 B 0 B
test-utils/dist/testUtils.module.js 454 B 0 B
test-utils/dist/testUtils.umd.js 536 B 0 B

compressed-size-action

@@ -304,10 +310,8 @@ export function toChildArray(children, out) {
}

function placeChild(parentDom, newDom, oldDom) {
if (oldDom == null || oldDom.parentNode !== parentDom) {
parentDom.insertBefore(newDom, null);
} else if (newDom != oldDom || newDom.parentNode == null) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The newDom.parentNode == null condition can also be removed cuz it would never happen, or if did would result in a DOMException.

For this condition to be hit, newDom would have to be equal to oldDom cuz of the check prior to this one. So in that scenario, if newDom.parentNode == null, then oldDom.parentNode == null. If oldDom is unmounted (since it has no parentNode), then calling parentDom.insertBefore(newDom, oldDom) would error cuz oldDom is unmounted and you can't insert a node before another node that is unmounted.

@andrewiggins
Copy link
Member Author

For some additional context, the new Fragment tests I added are actually from our Suspense test suite. The suspense tests started failing, so I pulled out a simplified repro from those tests into its own test so it was easier to debug and see what's going on.

@andrewiggins
Copy link
Member Author

@marvinhagemeister This PR removes usages of .parentNode in our diff! Hopefully this will help unblock some of the Fresh stuff we talked about before

Copy link
Member

@marvinhagemeister marvinhagemeister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yooo this is fantastic!!! From quickly trying it out it looks like it resolves the issue I was running into with Fresh 👍

Also good call on making Fragment tests out of some Suspense tests.

@andrewiggins andrewiggins merged commit 9956916 into main Oct 28, 2023
13 checks passed
@andrewiggins andrewiggins deleted the improve-place-child branch October 28, 2023 01:01
@JoviDeCroock JoviDeCroock mentioned this pull request Nov 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants