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

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

github-actions bot commented Apr 22, 2022 •

edited

📊 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

github-actions bot commented Apr 22, 2022 •

edited

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

github-actions bot commented Apr 22, 2022 • edited

📊 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

github-actions bot commented Apr 22, 2022 • edited

developit commented Apr 22, 2022 •

edited

github-actions bot commented Apr 22, 2022 •

edited

coveralls commented Apr 22, 2022 •

edited

github-actions bot commented Apr 22, 2022 •

edited