Experiment: split component lifecycle merge types #3519

developit · 2022-04-22T15:46:30Z

This is an alternative to #3518 that re-unifies component rendering (function and class components taking the same codepath) in order to split apart component mounting vs patching. It may also be possible to keep function/class components split up while also keeping mount/patch separate, but some quick experiments locally seemed to show a fairly major size increase (4 functions with limited similarity, vs 2 similar functions in both main and this PR).

The code here is primarily a refactoring of the v11 code from main, with a few optimizations from vm incorporated. In particular, renderFunctionComponent() and renderClassComponent() were merged into a new patchComponent() method (to match patchElement). It also removes short-circuiting of Text Internals, since we hadn't actually intended to bypass options._diff() and options.diffed() for those.

…ditional tree walk.

…mponents.

…ation that hoists equality check out of component rendering.

github-actions · 2022-04-22T15:46:48Z

📊 Tachometer Benchmark Results

Summary

duration

02_replace1k: unsure 🔍 -1% - +2% (-2.78ms - +3.33ms)
^{preact-local vs preact-master}
03_update10th1k_x16: slower ❌ 0% - 5% (0.12ms - 2.35ms)
^{preact-local vs preact-master}
07_create10k: unsure 🔍 -0% - +0% (-4.92ms - +1.29ms)
^{preact-local vs preact-master}
filter_list: unsure 🔍 -5% - +1% (-52.71ms - +15.93ms)
^{preact-local vs preact-master}
hydrate1k: unsure 🔍 -9% - +5% (-11.94ms - +6.05ms)
^{preact-local vs preact-master}
many_updates: unsure 🔍 -6% - +2% (-49.87ms - +20.87ms)
^{preact-local vs preact-master}
text_update: unsure 🔍 -5% - +10% (-16.34ms - +33.98ms)
^{preact-local vs preact-master}
todo: unsure 🔍 -5% - +0% (-2.77ms - +0.31ms)
^{preact-local vs preact-master}

usedJSHeapSize

02_replace1k: slower ❌ 0% - 1% (0.01ms - 0.03ms)
^{preact-local vs preact-master}
03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
^{preact-local vs preact-master}
07_create10k: unsure 🔍 -0% - +0% (-0.03ms - +0.04ms)
^{preact-local vs preact-master}
filter_list: slower ❌ 1% - 1% (0.02ms - 0.03ms)
^{preact-local vs preact-master}
hydrate1k: unsure 🔍 +0% - +0% (+0.00ms - +0.01ms)
^{preact-local vs preact-master}
many_updates: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
^{preact-local vs preact-master}
text_update: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
^{preact-local vs preact-master}
todo: unsure 🔍 -1% - +2% (-0.01ms - +0.03ms)
^{preact-local vs preact-master}

Results

02_replace1k

Browser: chrome-headless 102.0.5005.61
Sample size: 80
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	186.64ms - 190.97ms	-	unsure 🔍 -2% - +1% -3.33ms - +2.78ms
preact-local	186.93ms - 191.23ms	unsure 🔍 -1% - +2% -2.78ms - +3.33ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	4.16ms - 4.17ms	-	faster ✔ 0% - 1% 0.01ms - 0.03ms
preact-local	4.17ms - 4.19ms	slower ❌ 0% - 1% 0.01ms - 0.03ms	-

run-warmup-0

Version	Avg time	vs preact-master	vs preact-local
preact-master	61.40ms - 63.43ms	-	faster ✔ 0% - 5% 0.27ms - 3.18ms
preact-local	63.09ms - 65.18ms	slower ❌ 0% - 5% 0.27ms - 3.18ms	-

run-warmup-1

Version	Avg time	vs preact-master	vs preact-local
preact-master	85.27ms - 89.20ms	-	slower ❌ 4% - 12% 3.45ms - 9.29ms
preact-local	78.71ms - 83.02ms	faster ✔ 4% - 11% 3.45ms - 9.29ms	-

run-warmup-2

Version	Avg time	vs preact-master	vs preact-local
preact-master	78.87ms - 81.51ms	-	unsure 🔍 -4% - +0% -3.55ms - +0.14ms
preact-local	80.61ms - 83.18ms	unsure 🔍 -0% - +4% -0.14ms - +3.55ms	-

run-final

Version	Avg time	vs preact-master	vs preact-local
preact-master	186.66ms - 191.00ms	-	unsure 🔍 -2% - +1% -3.34ms - +2.76ms
preact-local	186.97ms - 191.27ms	unsure 🔍 -1% - +2% -2.76ms - +3.34ms	-

03_update10th1k_x16

Browser: chrome-headless 102.0.5005.61
Sample size: 60
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	49.49ms - 50.83ms	-	faster ✔ 0% - 5% 0.12ms - 2.35ms
preact-local	50.51ms - 52.29ms	slower ❌ 0% - 5% 0.12ms - 2.35ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	4.19ms - 4.20ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	4.19ms - 4.19ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

07_create10k

Browser: chrome-headless 102.0.5005.61
Sample size: 50
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	1267.99ms - 1272.82ms	-	unsure 🔍 -0% - +0% -1.29ms - +4.92ms
preact-local	1266.64ms - 1270.54ms	unsure 🔍 -0% - +0% -4.92ms - +1.29ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	28.31ms - 28.36ms	-	unsure 🔍 -0% - +0% -0.04ms - +0.03ms
preact-local	28.32ms - 28.36ms	unsure 🔍 -0% - +0% -0.03ms - +0.04ms	-

filter_list

Browser: chrome-headless 102.0.5005.61
Sample size: 60
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	1093.45ms - 1137.21ms	-	unsure 🔍 -1% - +5% -15.93ms - +52.71ms
preact-local	1070.49ms - 1123.38ms	unsure 🔍 -5% - +1% -52.71ms - +15.93ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	2.10ms - 2.11ms	-	faster ✔ 1% - 1% 0.02ms - 0.03ms
preact-local	2.12ms - 2.14ms	slower ❌ 1% - 1% 0.02ms - 0.03ms	-

hydrate1k

Browser: chrome-headless 102.0.5005.61
Sample size: 80
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	118.86ms - 131.08ms	-	unsure 🔍 -5% - +10% -6.05ms - +11.94ms
preact-local	115.42ms - 128.63ms	unsure 🔍 -9% - +5% -11.94ms - +6.05ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	6.92ms - 6.92ms	-	unsure 🔍 -0% - -0% -0.01ms - -0.00ms
preact-local	6.92ms - 6.92ms	unsure 🔍 +0% - +0% +0.00ms - +0.01ms	-

many_updates

Browser: chrome-headless 102.0.5005.61
Sample size: 70
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	841.85ms - 893.47ms	-	unsure 🔍 -2% - +6% -20.87ms - +49.87ms
preact-local	828.97ms - 877.35ms	unsure 🔍 -6% - +2% -49.87ms - +20.87ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	5.73ms - 5.73ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.01ms
preact-local	5.73ms - 5.73ms	unsure 🔍 -0% - +0% -0.01ms - +0.01ms	-

text_update

Browser: chrome-headless 102.0.5005.61
Sample size: 80
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	332.05ms - 366.39ms	-	unsure 🔍 -9% - +4% -33.98ms - +16.34ms
preact-local	339.65ms - 376.44ms	unsure 🔍 -5% - +10% -16.34ms - +33.98ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	1.31ms - 1.31ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	1.31ms - 1.32ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

todo

Browser: chrome-headless 102.0.5005.61
Sample size: 60
Built by: Benchmarks #786
Commit: 0d75911

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	58.63ms - 61.12ms	-	unsure 🔍 -1% - +5% -0.31ms - +2.77ms
preact-local	57.74ms - 59.55ms	unsure 🔍 -5% - +0% -2.77ms - +0.31ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	1.34ms - 1.37ms	-	unsure 🔍 -2% - +1% -0.03ms - +0.01ms
preact-local	1.34ms - 1.38ms	unsure 🔍 -1% - +2% -0.01ms - +0.03ms	-

_{tachometer-reporter-action v2 for Benchmarks}

coveralls · 2022-04-22T15:48:18Z

Coverage increased (+0.1%) to 99.571% when pulling 0d75911 on experiment-split-component-lifecycle-merge-types into 730604e on main.

github-actions · 2022-04-22T15:49:09Z

Size Change: -243 B (0%)

Total Size: 38.2 kB

Filename	Size	Change
`compat/dist/compat.js`	3.62 kB	-9 B (0%)
`compat/dist/compat.umd.js`	3.7 kB	-10 B (0%)
`dist/preact.js`	4.61 kB	-86 B (1%)
`dist/preact.min.js`	4.69 kB	-66 B (1%)
`dist/preact.umd.js`	4.7 kB	-72 B (1%)

ℹ️ View Unchanged

Filename	Size	Change
`debug/dist/debug.js`	3.25 kB	0 B
`debug/dist/debug.umd.js`	3.33 kB	0 B
`devtools/dist/devtools.js`	232 B	0 B
`devtools/dist/devtools.umd.js`	316 B	0 B
`hooks/dist/hooks.js`	1.32 kB	0 B
`hooks/dist/hooks.umd.js`	1.4 kB	0 B
`jsx-runtime/dist/jsxRuntime.js`	342 B	0 B
`jsx-runtime/dist/jsxRuntime.umd.js`	425 B	0 B
`server/dist/server.js`	2.6 kB	0 B
`server/dist/server.umd.js`	2.69 kB	0 B
`test-utils/dist/testUtils.js`	431 B	0 B
`test-utils/dist/testUtils.umd.js`	516 B	0 B

_{compressed-size-action}

…ypes

…thub.com:preactjs/preact into experiment-split-component-lifecycle-merge-types

…ypes

developit added 4 commits April 12, 2022 17:06

checkpoint: renderer state refactor to accessors

8ea55ce

Checkpoint: switch parentDom back to an argument, context back to con…

09d4126

…ditional tree walk.

Experiment: separate component mount/patch, and (re)unify Fn+Class co…

475f051

…mponents.

Commented-out (but working) version of the original patch() implement…

4770d40

…ation that hoists equality check out of component rendering.

developit added 9 commits April 25, 2022 10:01

perf/size tweaks

0c32057

simplify siblingDom calc and reduce size

3d862de

Merge branch 'main' into experiment-split-component-lifecycle-merge-t…

7c8db11

…ypes

remove unused code

768f660

Remove parentDom everywhere, replace with a conditional lookup

3bc6915

optimization: hoist _dom access out of patchElement

52ff077

cache options hook accesses (-10b)

722863a

revert diff hook caching

5add8d3

(revert)

5e6b4cc

JoviDeCroock mentioned this pull request Apr 28, 2022

Separate component patching from mounting #3525

Merged

developit and others added 5 commits April 28, 2022 14:53

fix all type errors

7f631fd

Merge branch 'main' into experiment-split-component-lifecycle-merge-t…

39446d4

…ypes

add test for portal siblings and missing TS properties

bd79906

Merge branch 'experiment-split-component-lifecycle-merge-types' of gi…

8e2d4a5

…thub.com:preactjs/preact into experiment-split-component-lifecycle-merge-types

Merge branch 'main' into experiment-split-component-lifecycle-merge-t…

0d75911

…ypes

JoviDeCroock added the 11.x label Jul 5, 2022

Thompson1985 approved these changes Oct 6, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experiment: split component lifecycle merge types #3519

Experiment: split component lifecycle merge types #3519

developit commented Apr 22, 2022 •

edited

Loading

github-actions bot commented Apr 22, 2022 •

edited

Loading

📊 Tachometer Benchmark Results

Summary

duration

usedJSHeapSize

Results

duration

usedJSHeapSize

run-warmup-0

run-warmup-1

run-warmup-2

run-final

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

coveralls commented Apr 22, 2022 •

edited

Loading

github-actions bot commented Apr 22, 2022 •

edited

Loading

Experiment: split component lifecycle merge types #3519

Are you sure you want to change the base?

Experiment: split component lifecycle merge types #3519

Conversation

developit commented Apr 22, 2022 • edited Loading

github-actions bot commented Apr 22, 2022 • edited Loading

📊 Tachometer Benchmark Results

Summary

duration

usedJSHeapSize

Results

duration

usedJSHeapSize

run-warmup-0

run-warmup-1

run-warmup-2

run-final

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

coveralls commented Apr 22, 2022 • edited Loading

github-actions bot commented Apr 22, 2022 • edited Loading

developit commented Apr 22, 2022 •

edited

Loading

github-actions bot commented Apr 22, 2022 •

edited

Loading

coveralls commented Apr 22, 2022 •

edited

Loading

github-actions bot commented Apr 22, 2022 •

edited

Loading