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

fix(hydration): streaming renders #4446

Closed JoviDeCroock closed 2 months ago

JoviDeCroock commented 2 months ago

Discovered in https://github.com/jacob-ebey/preact-ooo-issues CC @jacob-ebey

What happened is that we'd use the <!-- preact-island indicator as our oldDom which made it so that we'd fail our hydration resumption when there was a fallback in Suspense. This because during hydration resumption we only reserve 1 DOM-child for the resume, this fixes it holistically where we exclude comments from being used as our resumption point.

There's an artefact here https://github.com/preactjs/preact/actions/runs/9959423157

There are still existing issues with returning multiple DOM-nodes/... in resumed hydration however that is tackled in #4442 where we'll most likely introduce a second RFC for streaming in particular

github-actions[bot] commented 2 months ago

📊 Tachometer Benchmark Results

Summary

duration

  • create10k: unsure 🔍 -1% - +2% (-12.24ms - +18.73ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -2% - +4% (-0.34ms - +0.74ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -4% - +2% (-2.89ms - +1.49ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -2% - +0% (-0.28ms - +0.05ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -3% - +2% (-2.15ms - +1.23ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -5% - +4% (-0.10ms - +0.08ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -2% - +1% (-0.53ms - +0.14ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -1% - +3% (-0.39ms - +1.22ms)
    preact-local vs preact-main

usedJSHeapSize

  • create10k: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -3% - +0% (-0.42ms - +0.04ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -0% - +1% (-0.00ms - +0.04ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main
  • todo: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main

Results

create10k
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local866.92ms - 892.18ms-unsure 🔍
-1% - +2%
-12.24ms - +18.73ms
preact-main867.35ms - 885.26msunsure 🔍
-2% - +1%
-18.73ms - +12.24ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local25.15ms - 25.15ms-unsure 🔍
+0% - +0%
+0.00ms - +0.00ms
preact-main25.15ms - 25.15msunsure 🔍
-0% - -0%
-0.00ms - -0.00ms
-
filter-list
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.53ms - 17.52ms-unsure 🔍
-2% - +4%
-0.34ms - +0.74ms
preact-main16.60ms - 17.05msunsure 🔍
-4% - +2%
-0.74ms - +0.34ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.69ms - 1.70ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main1.69ms - 1.70msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
hydrate1k
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local71.01ms - 73.07ms-unsure 🔍
-4% - +2%
-2.89ms - +1.49ms
preact-main70.81ms - 74.68msunsure 🔍
-2% - +4%
-1.49ms - +2.89ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local13.12ms - 13.31ms-unsure 🔍
-3% - +0%
-0.42ms - +0.04ms
preact-main13.20ms - 13.61msunsure 🔍
-0% - +3%
-0.04ms - +0.42ms
-
many-updates
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.29ms - 16.54ms-unsure 🔍
-2% - +0%
-0.28ms - +0.05ms
preact-main16.42ms - 16.64msunsure 🔍
-0% - +2%
-0.05ms - +0.28ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local4.61ms - 4.62ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main4.61ms - 4.61msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
replace1k
  • Browser: chrome-headless
  • Sample size: 100
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local73.16ms - 75.58ms-unsure 🔍
-3% - +2%
-2.15ms - +1.23ms
preact-main73.65ms - 76.00msunsure 🔍
-2% - +3%
-1.23ms - +2.15ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.52ms - 3.55ms-unsure 🔍
-0% - +1%
-0.00ms - +0.04ms
preact-main3.50ms - 3.53msunsure 🔍
-1% - +0%
-0.04ms - +0.00ms
-

run-warmup-0

VersionAvg timevs preact-localvs preact-main
preact-local28.62ms - 29.19ms-unsure 🔍
-1% - +2%
-0.39ms - +0.49ms
preact-main28.52ms - 29.18msunsure 🔍
-2% - +1%
-0.49ms - +0.39ms
-

run-warmup-1

VersionAvg timevs preact-localvs preact-main
preact-local34.33ms - 36.21ms-unsure 🔍
-4% - +3%
-1.50ms - +1.16ms
preact-main34.49ms - 36.38msunsure 🔍
-3% - +4%
-1.16ms - +1.50ms
-

run-warmup-2

VersionAvg timevs preact-localvs preact-main
preact-local24.53ms - 25.39ms-unsure 🔍
-1% - +3%
-0.26ms - +0.71ms
preact-main24.51ms - 24.96msunsure 🔍
-3% - +1%
-0.71ms - +0.26ms
-

run-warmup-3

VersionAvg timevs preact-localvs preact-main
preact-local29.37ms - 30.86ms-unsure 🔍
-4% - +4%
-1.16ms - +1.06ms
preact-main29.34ms - 30.99msunsure 🔍
-4% - +4%
-1.06ms - +1.16ms
-

run-warmup-4

VersionAvg timevs preact-localvs preact-main
preact-local22.44ms - 24.30ms-unsure 🔍
-4% - +7%
-0.90ms - +1.56ms
preact-main22.24ms - 23.85msunsure 🔍
-7% - +4%
-1.56ms - +0.90ms
-

run-final

VersionAvg timevs preact-localvs preact-main
preact-local22.40ms - 23.39ms-unsure 🔍
-6% - +0%
-1.43ms - +0.01ms
preact-main23.08ms - 24.13msunsure 🔍
-0% - +6%
-0.01ms - +1.43ms
-
text-update
  • Browser: chrome-headless
  • Sample size: 120
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local1.95ms - 2.10ms-unsure 🔍
-5% - +4%
-0.10ms - +0.08ms
preact-main1.99ms - 2.09msunsure 🔍
-4% - +5%
-0.08ms - +0.10ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local0.98ms - 0.98ms-unsure 🔍
+0% - +0%
+0.00ms - +0.00ms
preact-main0.98ms - 0.98msunsure 🔍
-0% - -0%
-0.00ms - -0.00ms
-
todo
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local25.93ms - 26.14ms-unsure 🔍
-2% - +1%
-0.53ms - +0.14ms
preact-main25.92ms - 26.54msunsure 🔍
-1% - +2%
-0.14ms - +0.53ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.25ms - 1.25ms-unsure 🔍
+0% - +0%
+0.00ms - +0.00ms
preact-main1.25ms - 1.25msunsure 🔍
-0% - -0%
-0.00ms - -0.00ms
-
update10th1k
  • Browser: chrome-headless
  • Sample size: 50
  • Built by: Benchmarks #1586
  • Commit: 852f511

duration

VersionAvg timevs preact-localvs preact-main
preact-local36.26ms - 37.38ms-unsure 🔍
-1% - +3%
-0.39ms - +1.22ms
preact-main35.83ms - 36.98msunsure 🔍
-3% - +1%
-1.22ms - +0.39ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.55ms - 3.55ms-unsure 🔍
+0% - +0%
+0.00ms - +0.00ms
preact-main3.55ms - 3.55msunsure 🔍
-0% - -0%
-0.00ms - -0.00ms
-

tachometer-reporter-action v2 for Benchmarks

github-actions[bot] commented 2 months ago

Size Change: +101 B (+0.16%)

Total Size: 62 kB

Filename Size Change
dist/preact.js 4.72 kB +17 B (+0.36%)
dist/preact.min.js 4.75 kB +15 B (+0.32%)
dist/preact.min.module.js 4.75 kB +17 B (+0.36%)
dist/preact.min.umd.js 4.78 kB +16 B (+0.34%)
dist/preact.module.js 4.74 kB +18 B (+0.38%)
dist/preact.umd.js 4.8 kB +18 B (+0.38%)
ℹī¸ View Unchanged | Filename | Size | | :--- | :---: | | `compat/dist/compat.js` | 4.1 kB | | `compat/dist/compat.module.js` | 4.03 kB | | `compat/dist/compat.umd.js` | 4.17 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` | 273 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.615% (+0.003%) from 99.612% when pulling 852f51106d03408c644038e73a9611a14bb7c79a on streaming-render-fixes into f7f9d9bf4309d09bcd0a432acd72787b7d9baecb on main.