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

chore(hydration): Test approach to comment markers #4444

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

chore(hydration): Test approach to comment markers #4444

wants to merge 8 commits into from
+119 −5

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Jul 15, 2024 •
edited
Loading

Relates to #4442
Implementation from preactjs/preact-render-to-string#376

This implements a hydration approach with the comment markers, one thing that's noteworthy is that oldDom in our diffChildren algorithm becomes stale.

We diff the wrapping element of the Suspense and non-suspenseful child, we get to an oldDom which is the first child-node of said series. When we suspend we don't move oldDom, we can try and move it inside of diff but this won't affect the continued diffChildren so we are stuck inserting that node in front of our oldDom.

This has been solved in 647d138 through correctly skipping comment nodes while placing children.

I think the last part of this research would be to set up a comprehensive test suite for both renderToStringAsync as well as renderToStream so we can have fixtures for this behaviour, what do you all think?

@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 15, 2024 •
edited
Loading

📊 Tachometer Benchmark Results

Summary

duration

  • create10k: unsure 🔍 -0% - +1% (-4.01ms - +6.86ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -0% - -0% (-0.08ms - -0.01ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -0% - +3% (-0.22ms - +2.26ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -4% - +3% (-0.68ms - +0.52ms)
    preact-local vs preact-main
  • replace1k: faster ✔ 0% - 5% (0.13ms - 3.49ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -5% - +5% (-0.09ms - +0.09ms)
    preact-local vs preact-main
  • todo: slower ❌ 4% - 5% (1.23ms - 1.71ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -3% - +5% (-0.88ms - +1.52ms)
    preact-local vs preact-main

usedJSHeapSize

  • create10k: unsure 🔍 +0% - +0% (+0.01ms - +0.01ms)
    preact-local vs preact-main
  • filter-list: slower ❌ 1% - 1% (0.01ms - 0.02ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -2% - +3% (-0.30ms - +0.60ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 +0% - +0% (+0.01ms - +0.02ms)
    preact-local vs preact-main
  • replace1k: slower ❌ 0% - 1% (0.01ms - 0.02ms)
    preact-local vs preact-main
  • text-update: slower ❌ 1% - 1% (0.01ms - 0.01ms)
    preact-local vs preact-main
  • todo: slower ❌ 1% - 1% (0.01ms - 0.01ms)
    preact-local vs preact-main
  • update10th1k: slower ❌ 0% - 1% (0.01ms - 0.02ms)
    preact-local vs preact-main

Results

create10k

duration

VersionAvg timevs preact-localvs preact-main
preact-local917.06ms - 925.57ms-unsure 🔍
-0% - +1%
-4.01ms - +6.86ms
preact-main916.50ms - 923.27msunsure 🔍
-1% - +0%
-6.86ms - +4.01ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local25.26ms - 25.26ms-unsure 🔍
+0% - +0%
+0.01ms - +0.01ms
preact-main25.24ms - 25.24msunsure 🔍
-0% - -0%
-0.01ms - -0.01ms		-
filter-list

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.55ms - 16.59ms-unsure 🔍
-0% - -0%
-0.08ms - -0.01ms
preact-main16.59ms - 16.65msunsure 🔍
+0% - +0%
+0.01ms - +0.08ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.64ms - 1.65ms-slower ❌
1% - 1%
0.01ms - 0.02ms
preact-main1.63ms - 1.63msfaster ✔
1% - 1%
0.01ms - 0.02ms		-
hydrate1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local71.69ms - 74.10ms-unsure 🔍
-0% - +3%
-0.22ms - +2.26ms
preact-main71.59ms - 72.16msunsure 🔍
-3% - +0%
-2.26ms - +0.22ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local17.16ms - 17.80ms-unsure 🔍
-2% - +3%
-0.30ms - +0.60ms
preact-main17.02ms - 17.64msunsure 🔍
-3% - +2%
-0.60ms - +0.30ms		-
many-updates

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.26ms - 17.11ms-unsure 🔍
-4% - +3%
-0.68ms - +0.52ms
preact-main16.35ms - 17.19msunsure 🔍
-3% - +4%
-0.52ms - +0.68ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local4.56ms - 4.56ms-unsure 🔍
+0% - +0%
+0.01ms - +0.02ms
preact-main4.54ms - 4.55msunsure 🔍
-0% - -0%
-0.02ms - -0.01ms		-
replace1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local73.39ms - 75.56ms-faster ✔
0% - 5%
0.13ms - 3.49ms
preact-main75.00ms - 77.57msslower ❌
0% - 5%
0.13ms - 3.49ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.55ms - 3.57ms-slower ❌
0% - 1%
0.01ms - 0.02ms
preact-main3.54ms - 3.55msfaster ✔
0% - 1%
0.01ms - 0.02ms		-

run-warmup-0

VersionAvg timevs preact-localvs preact-main
preact-local29.84ms - 30.62ms-unsure 🔍
-2% - +2%
-0.65ms - +0.64ms
preact-main29.72ms - 30.75msunsure 🔍
-2% - +2%
-0.64ms - +0.65ms		-

run-warmup-1

VersionAvg timevs preact-localvs preact-main
preact-local34.45ms - 35.66ms-unsure 🔍
-3% - +2%
-1.12ms - +0.77ms
preact-main34.50ms - 35.96msunsure 🔍
-2% - +3%
-0.77ms - +1.12ms		-

run-warmup-2

VersionAvg timevs preact-localvs preact-main
preact-local25.44ms - 25.85ms-unsure 🔍
-2% - +1%
-0.46ms - +0.28ms
preact-main25.43ms - 26.05msunsure 🔍
-1% - +2%
-0.28ms - +0.46ms		-

run-warmup-3

VersionAvg timevs preact-localvs preact-main
preact-local28.45ms - 30.25ms-unsure 🔍
-4% - +4%
-1.26ms - +1.15ms
preact-main28.61ms - 30.21msunsure 🔍
-4% - +4%
-1.15ms - +1.26ms		-

run-warmup-4

VersionAvg timevs preact-localvs preact-main
preact-local20.25ms - 21.03ms-unsure 🔍
-2% - +2%
-0.46ms - +0.49ms
preact-main20.35ms - 20.89msunsure 🔍
-2% - +2%
-0.49ms - +0.46ms		-

run-final

VersionAvg timevs preact-localvs preact-main
preact-local23.94ms - 25.13ms-unsure 🔍
-5% - +1%
-1.37ms - +0.34ms
preact-main24.44ms - 25.65msunsure 🔍
-1% - +6%
-0.34ms - +1.37ms		-
text-update

duration

VersionAvg timevs preact-localvs preact-main
preact-local1.98ms - 2.12ms-unsure 🔍
-5% - +5%
-0.09ms - +0.09ms
preact-main1.99ms - 2.11msunsure 🔍
-5% - +5%
-0.09ms - +0.09ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.09ms - 1.09ms-slower ❌
1% - 1%
0.01ms - 0.01ms
preact-main1.08ms - 1.08msfaster ✔
1% - 1%
0.01ms - 0.01ms		-
todo

duration

VersionAvg timevs preact-localvs preact-main
preact-local35.00ms - 35.40ms-slower ❌
4% - 5%
1.23ms - 1.71ms
preact-main33.60ms - 33.86msfaster ✔
4% - 5%
1.23ms - 1.71ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.20ms - 1.20ms-slower ❌
1% - 1%
0.01ms - 0.01ms
preact-main1.19ms - 1.19msfaster ✔
1% - 1%
0.01ms - 0.01ms		-
update10th1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local30.33ms - 32.06ms-unsure 🔍
-3% - +5%
-0.88ms - +1.52ms
preact-main30.05ms - 31.71msunsure 🔍
-5% - +3%
-1.52ms - +0.88ms		-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.50ms - 3.50ms-slower ❌
0% - 1%
0.01ms - 0.02ms
preact-main3.48ms - 3.49msfaster ✔
0% - 1%
0.01ms - 0.02ms		-

tachometer-reporter-action v2 for Benchmarks

@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 15, 2024 •
edited
Loading

Size Change: +824 B (+1.33%)

Total Size: 62.6 kB

Filename Size Change
dist/preact.js 4.81 kB +138 B (+2.96%)
dist/preact.min.js 4.83 kB +136 B (+2.9%)
dist/preact.min.module.js 4.83 kB +136 B (+2.9%)
dist/preact.min.umd.js 4.86 kB +136 B (+2.88%)
dist/preact.module.js 4.83 kB +138 B (+2.94%)
dist/preact.umd.js 4.88 kB +140 B (+2.95%)
ℹ️ View Unchanged
Filename Size
compat/dist/compat.js 4.11 kB
compat/dist/compat.module.js 4.04 kB
compat/dist/compat.umd.js 4.18 kB
debug/dist/debug.js 3.7 kB
debug/dist/debug.module.js 3.71 kB
debug/dist/debug.umd.js 3.78 kB
devtools/dist/devtools.js 259 B
devtools/dist/devtools.module.js 274 B
devtools/dist/devtools.umd.js 345 B
hooks/dist/hooks.js 1.53 kB
hooks/dist/hooks.module.js 1.56 kB
hooks/dist/hooks.umd.js 1.6 kB
jsx-runtime/dist/jsxRuntime.js 981 B
jsx-runtime/dist/jsxRuntime.module.js 956 B
jsx-runtime/dist/jsxRuntime.umd.js 1.06 kB
test-utils/dist/testUtils.js 451 B
test-utils/dist/testUtils.module.js 456 B
test-utils/dist/testUtils.umd.js 536 B

compressed-size-action

@JoviDeCroock JoviDeCroock force-pushed the test-out-comment-markers branch 2 times, most recently from 74210d4 to 1281599 Compare July 15, 2024 08:22
@coveralls
Copy link

coveralls commented Jul 15, 2024 •
edited
Loading

Coverage Status

coverage: 99.492% (+0.008%) from 99.484%
when pulling 8a931f5 on test-out-comment-markers
into 1a6bd4d on main.

@JoviDeCroock JoviDeCroock marked this pull request as ready for review July 15, 2024 08:52
JoviDeCroock
JoviDeCroock commented Jul 15, 2024
View reviewed changes
src/component.js Outdated Show resolved Hide resolved
@JoviDeCroock JoviDeCroock force-pushed the test-out-comment-markers branch 5 times, most recently from eae64dd to 7041375 Compare July 16, 2024 15:27
JoviDeCroock
JoviDeCroock commented Aug 29, 2024
View reviewed changes
src/diff/index.js Outdated Show resolved Hide resolved
@JoviDeCroock JoviDeCroock force-pushed the test-out-comment-markers branch from 5365b51 to 8a931f5 Compare August 30, 2024 06:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Thompson1985 Thompson1985 Thompson1985 approved these changes

@marvinhagemeister marvinhagemeister marvinhagemeister approved these changes

@developit developit Awaiting requested review from developit

@andrewiggins andrewiggins Awaiting requested review from andrewiggins

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@JoviDeCroock @coveralls @marvinhagemeister @Thompson1985