search

preactjs / preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://preactjs.com
MIT License
36.64k stars 1.95k forks source link

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

Open JoviDeCroock opened 2 months ago

JoviDeCroock commented 2 months ago

Relates to https://github.com/preactjs/preact/issues/4442 Implementation from https://github.com/preactjs/preact-render-to-string/pull/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 https://github.com/preactjs/preact/pull/4444/commits/647d13865b3c9730f17f8ce68644145925a226d7 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[bot] commented 2 months ago

📊 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
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 100
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 170
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 110
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1652
  • Commit: 8a931f5

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[bot] commented 2 months ago

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

coveralls commented 2 months ago

Coverage Status

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