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.

Sign up for GitHub

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

Jump to bottom

Eagerly unmount placeholders #4090

Merged
merged 4 commits into from Aug 10, 2023
Merged

Eagerly unmount placeholders #4090

merged 4 commits into from Aug 10, 2023

Conversation

andrewiggins
Copy link
Member

When we detect that an unkeyed vnode is changing from "something" to a non-renderable (e.g. null or boolean), eagerly unmount that VNode so we can skip over it's DOM elements when diffing the next VNodes. This change prevents us from moving elements around other DOM nodes that are going to be unmounted.

Fixes #4074

@github-actions
Copy link

github-actions bot commented Aug 3, 2023 •
edited

📊 Tachometer Benchmark Results

Summary

duration

  • 02_replace1k: unsure 🔍 -2% - +2% (-1.94ms - +2.36ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -1% - +6% (-0.37ms - +3.28ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 -0% - +1% (-2.43ms - +23.51ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -3% - +2% (-0.85ms - +0.57ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -2% - +1% (-2.75ms - +0.76ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 -4% - +1% (-0.94ms - +0.25ms)
    preact-local vs preact-main
  • text_update: unsure 🔍 -4% - +3% (-0.14ms - +0.10ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -1% - +4% (-0.43ms - +2.27ms)
    preact-local vs preact-main

usedJSHeapSize

  • 02_replace1k: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -2% - +2% (-0.03ms - +0.02ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -1% - +0% (-0.03ms - +0.02ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 -0% - +1% (-0.02ms - +0.03ms)
    preact-local vs preact-main
  • text_update: unsure 🔍 -0% - +1% (-0.00ms - +0.00ms)
    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-main116.60ms - 119.29ms-unsure 🔍
-2% - +2%
-2.36ms - +1.94ms		unsure 🔍
-2% - +1%
-2.23ms - +1.71ms
preact-local116.48ms - 119.83msunsure 🔍
-2% - +2%
-1.94ms - +2.36ms		-unsure 🔍
-2% - +2%
-2.26ms - +2.15ms
preact-hooks116.77ms - 119.64msunsure 🔍
-1% - +2%
-1.71ms - +2.23ms		unsure 🔍
-2% - +2%
-2.15ms - +2.26ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.27ms - 3.28ms-unsure 🔍
-0% - +0%
-0.01ms - +0.00ms		faster ✔
1% - 1%
0.02ms - 0.04ms
preact-local3.27ms - 3.28msunsure 🔍
-0% - +0%
-0.00ms - +0.01ms		-faster ✔
1% - 1%
0.02ms - 0.03ms
preact-hooks3.30ms - 3.31msslower ❌
1% - 1%
0.02ms - 0.04ms		slower ❌
1% - 1%
0.02ms - 0.03ms		-

run-warmup-0

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main43.18ms - 44.47ms-unsure 🔍
-3% - +1%
-1.16ms - +0.62ms		faster ✔
1% - 5%
0.44ms - 2.27ms
preact-local43.47ms - 44.72msunsure 🔍
-1% - +3%
-0.62ms - +1.16ms		-faster ✔
0% - 4%
0.19ms - 1.99ms
preact-hooks44.53ms - 45.84msslower ❌
1% - 5%
0.44ms - 2.27ms		slower ❌
0% - 5%
0.19ms - 1.99ms		-

run-warmup-1

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main53.42ms - 54.77ms-faster ✔
1% - 5%
0.60ms - 2.91ms		faster ✔
0% - 4%
0.26ms - 2.28ms
preact-local54.91ms - 56.79msslower ❌
1% - 5%
0.60ms - 2.91ms		-unsure 🔍
-1% - +3%
-0.72ms - +1.68ms
preact-hooks54.61ms - 56.12msslower ❌
0% - 4%
0.26ms - 2.28ms		unsure 🔍
-3% - +1%
-1.68ms - +0.72ms		-

run-warmup-2

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main38.44ms - 39.66ms-unsure 🔍
-3% - +2%
-1.20ms - +0.66ms		unsure 🔍
-3% - +2%
-1.38ms - +0.63ms
preact-local38.62ms - 40.02msunsure 🔍
-2% - +3%
-0.66ms - +1.20ms		-unsure 🔍
-3% - +2%
-1.17ms - +0.96ms
preact-hooks38.62ms - 40.23msunsure 🔍
-2% - +4%
-0.63ms - +1.38ms		unsure 🔍
-2% - +3%
-0.96ms - +1.17ms		-

run-warmup-3

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main41.53ms - 43.96ms-unsure 🔍
-3% - +5%
-1.30ms - +2.13ms		faster ✔
3% - 11%
1.26ms - 5.15ms
preact-local41.12ms - 43.54msunsure 🔍
-5% - +3%
-2.13ms - +1.30ms		-faster ✔
4% - 12%
1.67ms - 5.56ms
preact-hooks44.43ms - 47.47msslower ❌
3% - 12%
1.26ms - 5.15ms		slower ❌
4% - 13%
1.67ms - 5.56ms		-

run-warmup-4

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main42.63ms - 44.49ms-unsure 🔍
-6% - +0%
-2.59ms - +0.06ms		faster ✔
1% - 7%
0.44ms - 3.19ms
preact-local43.88ms - 45.76msunsure 🔍
-0% - +6%
-0.06ms - +2.59ms		-unsure 🔍
-4% - +2%
-1.94ms - +0.83ms
preact-hooks44.36ms - 46.39msslower ❌
1% - 7%
0.44ms - 3.19ms		unsure 🔍
-2% - +4%
-0.83ms - +1.94ms		-

run-final

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main30.25ms - 31.84ms-unsure 🔍
-4% - +4%
-1.35ms - +1.29ms		unsure 🔍
-3% - +4%
-0.93ms - +1.17ms
preact-local30.02ms - 32.13msunsure 🔍
-4% - +4%
-1.29ms - +1.35ms		-unsure 🔍
-4% - +5%
-1.11ms - +1.41ms
preact-hooks30.24ms - 31.61msunsure 🔍
-4% - +3%
-1.17ms - +0.93ms		unsure 🔍
-5% - +4%
-1.41ms - +1.11ms		-
03_update10th1k_x16

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main52.08ms - 54.61ms-unsure 🔍
-6% - +1%
-3.28ms - +0.37ms		unsure 🔍
-4% - +3%
-1.97ms - +1.66ms
preact-local53.48ms - 56.12msunsure 🔍
-1% - +6%
-0.37ms - +3.28ms		-unsure 🔍
-1% - +6%
-0.55ms - +3.15ms
preact-hooks52.20ms - 54.80msunsure 🔍
-3% - +4%
-1.66ms - +1.97ms		unsure 🔍
-6% - +1%
-3.15ms - +0.55ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.23ms - 3.24ms-unsure 🔍
-0% - +0%
-0.01ms - +0.00ms		faster ✔
1% - 1%
0.02ms - 0.03ms
preact-local3.24ms - 3.25msunsure 🔍
-0% - +0%
-0.00ms - +0.01ms		-faster ✔
0% - 1%
0.02ms - 0.03ms
preact-hooks3.26ms - 3.27msslower ❌
1% - 1%
0.02ms - 0.03ms		slower ❌
1% - 1%
0.02ms - 0.03ms		-
07_create10k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1746.27ms - 1765.19ms-unsure 🔍
-1% - +0%
-23.51ms - +2.43ms		unsure 🔍
-1% - +0%
-19.66ms - +8.16ms
preact-local1757.40ms - 1775.14msunsure 🔍
-0% - +1%
-2.43ms - +23.51ms		-unsure 🔍
-0% - +1%
-8.73ms - +18.31ms
preact-hooks1751.29ms - 1771.68msunsure 🔍
-0% - +1%
-8.16ms - +19.66ms		unsure 🔍
-1% - +0%
-18.31ms - +8.73ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main25.32ms - 25.32ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms		unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-local25.32ms - 25.32msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms		-unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-hooks25.34ms - 25.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-main24.51ms - 25.54ms-unsure 🔍
-2% - +3%
-0.57ms - +0.85ms		unsure 🔍
-2% - +3%
-0.62ms - +0.71ms
preact-local24.40ms - 25.36msunsure 🔍
-3% - +2%
-0.85ms - +0.57ms		-unsure 🔍
-3% - +2%
-0.74ms - +0.54ms
preact-hooks24.56ms - 25.40msunsure 🔍
-3% - +2%
-0.71ms - +0.62ms		unsure 🔍
-2% - +3%
-0.54ms - +0.74ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1.43ms - 1.47ms-unsure 🔍
-2% - +2%
-0.02ms - +0.03ms		unsure 🔍
-2% - +2%
-0.02ms - +0.03ms
preact-local1.42ms - 1.46msunsure 🔍
-2% - +2%
-0.03ms - +0.02ms		-unsure 🔍
-2% - +2%
-0.03ms - +0.02ms
preact-hooks1.42ms - 1.46msunsure 🔍
-2% - +2%
-0.03ms - +0.02ms		unsure 🔍
-2% - +2%
-0.02ms - +0.03ms		-
hydrate1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main125.28ms - 127.76ms-unsure 🔍
-1% - +2%
-0.76ms - +2.75ms		unsure 🔍
-1% - +2%
-1.56ms - +1.90ms
preact-local124.28ms - 126.77msunsure 🔍
-2% - +1%
-2.75ms - +0.76ms		-unsure 🔍
-2% - +1%
-2.56ms - +0.91ms
preact-hooks125.14ms - 127.56msunsure 🔍
-2% - +1%
-1.90ms - +1.56ms		unsure 🔍
-1% - +2%
-0.91ms - +2.56ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main5.93ms - 5.97ms-unsure 🔍
-0% - +1%
-0.02ms - +0.03ms		unsure 🔍
-1% - +0%
-0.05ms - +0.01ms
preact-local5.93ms - 5.97msunsure 🔍
-1% - +0%
-0.03ms - +0.02ms		-unsure 🔍
-1% - +0%
-0.05ms - +0.00ms
preact-hooks5.95ms - 5.99msunsure 🔍
-0% - +1%
-0.01ms - +0.05ms		unsure 🔍
-0% - +1%
-0.00ms - +0.05ms		-
many_updates

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main22.71ms - 23.70ms-unsure 🔍
-1% - +4%
-0.25ms - +0.94ms		unsure 🔍
-3% - +3%
-0.62ms - +0.70ms
preact-local22.53ms - 23.18msunsure 🔍
-4% - +1%
-0.94ms - +0.25ms		-unsure 🔍
-4% - +1%
-0.85ms - +0.24ms
preact-hooks22.73ms - 23.60msunsure 🔍
-3% - +3%
-0.70ms - +0.62ms		unsure 🔍
-1% - +4%
-0.24ms - +0.85ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main4.47ms - 4.51ms-unsure 🔍
-1% - +0%
-0.03ms - +0.02ms		unsure 🔍
-1% - +0%
-0.05ms - +0.00ms
preact-local4.48ms - 4.51msunsure 🔍
-0% - +1%
-0.02ms - +0.03ms		-unsure 🔍
-1% - +0%
-0.04ms - +0.01ms
preact-hooks4.50ms - 4.53msunsure 🔍
-0% - +1%
-0.00ms - +0.05ms		unsure 🔍
-0% - +1%
-0.01ms - +0.04ms		-
text_update

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.36ms - 3.56ms-unsure 🔍
-3% - +4%
-0.10ms - +0.14ms		faster ✔
1% - 8%
0.03ms - 0.28ms
preact-local3.37ms - 3.51msunsure 🔍
-4% - +3%
-0.14ms - +0.10ms		-faster ✔
2% - 8%
0.08ms - 0.28ms
preact-hooks3.54ms - 3.69msslower ❌
1% - 8%
0.03ms - 0.28ms		slower ❌
2% - 8%
0.08ms - 0.28ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.62ms - 0.62ms-unsure 🔍
-1% - +0%
-0.00ms - +0.00ms		faster ✔
9% - 11%
0.06ms - 0.08ms
preact-local0.62ms - 0.62msunsure 🔍
-0% - +1%
-0.00ms - +0.00ms		-faster ✔
8% - 11%
0.06ms - 0.07ms
preact-hooks0.68ms - 0.70msslower ❌
10% - 12%
0.06ms - 0.08ms		slower ❌
9% - 12%
0.06ms - 0.07ms		-
todo

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main61.36ms - 63.18ms-unsure 🔍
-4% - +1%
-2.27ms - +0.43ms		faster ✔
3% - 10%
1.77ms - 7.06ms
preact-local62.19ms - 64.18msunsure 🔍
-1% - +4%
-0.43ms - +2.27ms		-faster ✔
1% - 9%
0.82ms - 6.17ms
preact-hooks64.20ms - 69.16msslower ❌
3% - 11%
1.77ms - 7.06ms		slower ❌
1% - 10%
0.82ms - 6.17ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.82ms - 0.82ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms		faster ✔
3% - 3%
0.02ms - 0.02ms
preact-local0.82ms - 0.82msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms		-faster ✔
2% - 3%
0.02ms - 0.02ms
preact-hooks0.84ms - 0.84msslower ❌
3% - 3%
0.02ms - 0.02ms		slower ❌
2% - 3%
0.02ms - 0.02ms		-

tachometer-reporter-action v2 for Benchmarks

andrewiggins
andrewiggins commented Aug 3, 2023
View reviewed changes
src/diff/children.js Outdated Show resolved Hide resolved
@coveralls
Copy link

coveralls commented Aug 3, 2023 •
edited

Coverage Status

coverage: 99.563%. remained the same when pulling c3d277c on eagerly-unmount-placeholders into 14aaa21 on main.

@github-actions
Copy link

github-actions bot commented Aug 3, 2023 •
edited

Size Change: +179 B (0%)

Total Size: 57.2 kB

Filename Size Change
dist/preact.js 4.35 kB +26 B (0%)
dist/preact.min.js 4.38 kB +31 B (0%)
dist/preact.min.module.js 4.38 kB +31 B (0%)
dist/preact.min.umd.js 4.41 kB +30 B (0%)
dist/preact.module.js 4.38 kB +30 B (0%)
dist/preact.umd.js 4.42 kB +31 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.64 kB 0 B
debug/dist/debug.module.js 3.62 kB 0 B
debug/dist/debug.umd.js 3.71 kB 0 B
devtools/dist/devtools.js 232 B 0 B
devtools/dist/devtools.module.js 241 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 360 B 0 B
jsx-runtime/dist/jsxRuntime.module.js 326 B 0 B
jsx-runtime/dist/jsxRuntime.umd.js 441 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

marvinhagemeister
marvinhagemeister approved these changes Aug 4, 2023
View reviewed changes
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.

I never would've thought of looking at the placeholders specifically. This is great!!

@andrewiggins andrewiggins merged commit 4fea40d into main Aug 10, 2023
13 checks passed
@andrewiggins andrewiggins deleted the eagerly-unmount-placeholders branch August 10, 2023 18:47
@JoviDeCroock JoviDeCroock mentioned this pull request Aug 12, 2023
Merged
@JoviDeCroock JoviDeCroock mentioned this pull request Apr 27, 2024
Draft
13 tasks
JoviDeCroock added a commit that referenced this pull request Apr 27, 2024
@JoviDeCroock
backport tests for #4090
aba4a42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marvinhagemeister marvinhagemeister marvinhagemeister approved these changes

@JoviDeCroock JoviDeCroock JoviDeCroock approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
4 participants
@andrewiggins @coveralls @marvinhagemeister @JoviDeCroock