Fix skewedIndex becoming outrageously big and document tradeoffs of our decisions

[JoviDeCroock]

Fixes #4482

When we move elements around i.e. [0, 1, 2] --> [1, 0, 2]

--> we diff 1, we find it at position 1 while our skewed index is 0 and our skew is 0
    we set the skew to 1 as we found an offset.
--> we diff 0, we find it at position 0 while our skewed index is at 2 and our skew is 1
    this makes us increase the skew again.
--> we diff 2, we find it at position 2 while our skewed index is at 4 and our skew is 2

This becomes an optimization question where currently we see a 1 element offset as an insertion or deletion i.e. we optimize for [0, 1, 2] --> [9, 0, 1, 2]
while a more than 1 offset we see as a swap.
We could probably build heuristics for having an optimized course of action here as well, but
might go at the cost of some bytes.

If we wanted to optimize for i.e. only swaps we'd just do the last two code-branches and have
only the first item be a re-scouting and all the others fall in their skewed counter-part.
We could also further optimize for swaps.

There are possible tweaks in how we mark a node for insertion, however I don't think it's in scope for this PR and prefer addressing the performance downgrade. Heck we could even remove the optimization for inserts/deletions and save 20-30 more bytes by only relying on >|<.

A more elaborate example

Basically for the case of:

const a = ['a', 'b', 'c', 'd', 'e'];
const b = ['a', 'd', 'b', 'c', 'e'];

When we follow the new-old algorithm we have now, we know that

• a is at the same position, no operation required
• d is moved from position 3 to position 1
  • This makes our skew go to -1 because everything that was before d moves to the left
• b is moved from position 1 to 2
  • Skew -1, no action
• c is moved from position 2 to 3
  • Skew -1, no action
• e has stayed static at position 4
  • Skew -1, but we correct after the fact by seeing that we have an offset of 1

This is no bug because the placeChild algorithm but feels like we could do a lot better in this algorithm by seeing that the length has stayed the same and comparing old to new instead 😅

Ideally we reset the skew again after diffing c

[github-actions]

📊 Tachometer Benchmark Results

Summary

duration

• create10k: unsure 🔍 -1% - +1% (-6.95ms - +10.94ms)
  ^{preact-local vs preact-main}
• filter-list: unsure 🔍 -1% - +1% (-0.12ms - +0.19ms)
  ^{preact-local vs preact-main}
• hydrate1k: unsure 🔍 -2% - +1% (-2.01ms - +0.95ms)
  ^{preact-local vs preact-main}
• many-updates: unsure 🔍 -2% - +1% (-0.36ms - +0.12ms)
  ^{preact-local vs preact-main}
• replace1k: unsure 🔍 -2% - +3% (-1.24ms - +2.58ms)
  ^{preact-local vs preact-main}
• text-update: unsure 🔍 -5% - +1% (-0.10ms - +0.02ms)
  ^{preact-local vs preact-main}
• todo: unsure 🔍 -4% - +1% (-1.23ms - +0.26ms)
  ^{preact-local vs preact-main}
• update10th1k: unsure 🔍 -2% - +4% (-0.50ms - +1.26ms)
  ^{preact-local vs preact-main}

usedJSHeapSize

• create10k: unsure 🔍 -0% - +0% (-0.02ms - +0.01ms)
  ^{preact-local vs preact-main}
• filter-list: slower ❌ 0% - 1% (0.00ms - 0.01ms)
  ^{preact-local vs preact-main}
• hydrate1k: unsure 🔍 -1% - +1% (-0.21ms - +0.12ms)
  ^{preact-local vs preact-main}
• many-updates: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
  ^{preact-local vs preact-main}
• replace1k: unsure 🔍 -0% - +1% (-0.01ms - +0.03ms)
  ^{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.01ms)
  ^{preact-local vs preact-main}

Results

create10k

• Browser: chrome-headless
• Sample size: 50
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	872.95ms - 889.19ms	-	unsure 🔍 -1% - +1% -6.95ms - +10.94ms
preact-main	875.33ms - 882.82ms	unsure 🔍 -1% - +1% -10.94ms - +6.95ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	25.29ms - 25.32ms	-	unsure 🔍 -0% - +0% -0.02ms - +0.01ms
preact-main	25.30ms - 25.32ms	unsure 🔍 -0% - +0% -0.01ms - +0.02ms	-

filter-list

• Browser: chrome-headless
• Sample size: 50
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	16.56ms - 16.85ms	-	unsure 🔍 -1% - +1% -0.12ms - +0.19ms
preact-main	16.61ms - 16.74ms	unsure 🔍 -1% - +1% -0.19ms - +0.12ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.70ms - 1.70ms	-	slower ❌ 0% - 1% 0.00ms - 0.01ms
preact-main	1.69ms - 1.70ms	faster ✔ 0% - 1% 0.00ms - 0.01ms	-

hydrate1k

• Browser: chrome-headless
• Sample size: 50
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	79.50ms - 81.15ms	-	unsure 🔍 -2% - +1% -2.01ms - +0.95ms
preact-main	79.63ms - 82.08ms	unsure 🔍 -1% - +3% -0.95ms - +2.01ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	15.65ms - 15.84ms	-	unsure 🔍 -1% - +1% -0.21ms - +0.12ms
preact-main	15.66ms - 15.93ms	unsure 🔍 -1% - +1% -0.12ms - +0.21ms	-

many-updates

• Browser: chrome-headless
• Sample size: 50
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	16.42ms - 16.78ms	-	unsure 🔍 -2% - +1% -0.36ms - +0.12ms
preact-main	16.57ms - 16.89ms	unsure 🔍 -1% - +2% -0.12ms - +0.36ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	4.61ms - 4.61ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-main	4.61ms - 4.62ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

replace1k

• Browser: chrome-headless
• Sample size: 100
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	75.32ms - 78.08ms	-	unsure 🔍 -2% - +3% -1.24ms - +2.58ms
preact-main	74.71ms - 77.34ms	unsure 🔍 -3% - +2% -2.58ms - +1.24ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	3.50ms - 3.52ms	-	unsure 🔍 -0% - +1% -0.01ms - +0.03ms
preact-main	3.48ms - 3.51ms	unsure 🔍 -1% - +0% -0.03ms - +0.01ms	-

run-warmup-0

Version	Avg time	vs preact-local	vs preact-main
preact-local	28.76ms - 29.31ms	-	unsure 🔍 -2% - +1% -0.69ms - +0.20ms
preact-main	28.92ms - 29.63ms	unsure 🔍 -1% - +2% -0.20ms - +0.69ms	-

run-warmup-1

Version	Avg time	vs preact-local	vs preact-main
preact-local	33.50ms - 35.00ms	-	unsure 🔍 -4% - +2% -1.32ms - +0.79ms
preact-main	33.77ms - 35.26ms	unsure 🔍 -2% - +4% -0.79ms - +1.32ms	-

run-warmup-2

Version	Avg time	vs preact-local	vs preact-main
preact-local	25.81ms - 26.55ms	-	unsure 🔍 -1% - +2% -0.30ms - +0.61ms
preact-main	25.77ms - 26.28ms	unsure 🔍 -2% - +1% -0.61ms - +0.30ms	-

run-warmup-3

Version	Avg time	vs preact-local	vs preact-main
preact-local	29.22ms - 30.89ms	-	unsure 🔍 -5% - +3% -1.40ms - +0.89ms
preact-main	29.53ms - 31.09ms	unsure 🔍 -3% - +5% -0.89ms - +1.40ms	-

run-warmup-4

Version	Avg time	vs preact-local	vs preact-main
preact-local	22.54ms - 23.91ms	-	unsure 🔍 -5% - +4% -1.20ms - +0.93ms
preact-main	22.54ms - 24.18ms	unsure 🔍 -4% - +5% -0.93ms - +1.20ms	-

run-final

Version	Avg time	vs preact-local	vs preact-main
preact-local	23.18ms - 24.28ms	-	unsure 🔍 -3% - +3% -0.74ms - +0.80ms
preact-main	23.16ms - 24.24ms	unsure 🔍 -3% - +3% -0.80ms - +0.74ms	-

text-update

• Browser: chrome-headless
• Sample size: 210
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.92ms - 2.01ms	-	unsure 🔍 -5% - +1% -0.10ms - +0.02ms
preact-main	1.96ms - 2.05ms	unsure 🔍 -1% - +5% -0.02ms - +0.10ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	0.98ms - 0.98ms	-	unsure 🔍 +0% - +0% +0.00ms - +0.00ms
preact-main	0.98ms - 0.98ms	unsure 🔍 -0% - -0% -0.00ms - -0.00ms	-

todo

• Browser: chrome-headless
• Sample size: 50
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	27.31ms - 27.52ms	-	unsure 🔍 -4% - +1% -1.23ms - +0.26ms
preact-main	27.16ms - 28.64ms	unsure 🔍 -1% - +4% -0.26ms - +1.23ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.25ms - 1.25ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-main	1.25ms - 1.25ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

update10th1k

• Browser: chrome-headless
• Sample size: 50
• Built by: Benchmarks #1645

• Commit: a6c3cff

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	30.36ms - 31.69ms	-	unsure 🔍 -2% - +4% -0.50ms - +1.26ms
preact-main	30.07ms - 31.22ms	unsure 🔍 -4% - +2% -1.26ms - +0.50ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	3.56ms - 3.57ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.01ms
preact-main	3.56ms - 3.57ms	unsure 🔍 -0% - +0% -0.01ms - +0.00ms	-

_{tachometer-reporter-action v2 for Benchmarks}

[github-actions]

Size Change: -118 B (-0.19%)

Total Size: 62 kB

Filename	Size	Change
dist/preact.js	4.7 kB	-19 B (-0.4%)
dist/preact.min.js	4.73 kB	-20 B (-0.42%)
dist/preact.min.module.js	4.73 kB	-20 B (-0.42%)
dist/preact.min.umd.js	4.76 kB	-19 B (-0.4%)
dist/preact.module.js	4.72 kB	-21 B (-0.44%)
dist/preact.umd.js	4.78 kB	-19 B (-0.4%)

ℹ️ 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]

coverage: 99.486%. remained the same
when pulling a6c3cff on fixes-to-diffing
into 8e8dd92 on main.