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: refocus element after a diff #4244

Closed
wants to merge 2 commits into from
Closed

chore: refocus element after a diff #4244

wants to merge 2 commits into from

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Dec 29, 2023 •
edited

This adds back the focussing of elements, this now only happens after committing the root rather than performing this check on every phase of child-diffing. This PR mainly checks whether it's worth the byte-size and to start a discussion

Fixes #4235
Fixes #3242

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 29, 2023 •
edited

📊 Tachometer Benchmark Results

Summary

duration

  • 02_replace1k: unsure 🔍 -1% - +1% (-0.86ms - +0.74ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -4% - +5% (-1.28ms - +1.49ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 -1% - +0% (-7.16ms - +4.10ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -0% - +1% (-0.06ms - +0.18ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -2% - +3% (-1.62ms - +2.69ms)
    preact-local vs preact-main
  • many_updates: slower ❌ 0% - 5% (0.05ms - 0.84ms)
    preact-local vs preact-main
  • text_update: slower ❌ 3% - 7% (0.07ms - 0.18ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -1% - +0% (-0.21ms - +0.10ms)
    preact-local vs preact-main

usedJSHeapSize

  • 02_replace1k: unsure 🔍 +0% - +0% (+0.00ms - +0.01ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 +0% - +0% (+0.01ms - +0.01ms)
    preact-local vs preact-main
  • filter_list: slower ❌ 0% - 1% (0.01ms - 0.01ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 +0% - +0% (+0.00ms - +0.01ms)
    preact-local vs preact-main
  • text_update: slower ❌ 1% - 4% (0.01ms - 0.03ms)
    preact-local vs preact-main
  • todo: slower ❌ 1% - 1% (0.01ms - 0.01ms)
    preact-local vs preact-main

Results

02_replace1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main81.56ms - 82.75ms-unsure 🔍
-1% - +1%
-0.74ms - +0.86ms		unsure 🔍
-1% - +1%
-0.61ms - +0.94ms
preact-local81.56ms - 82.62msunsure 🔍
-1% - +1%
-0.86ms - +0.74ms		-unsure 🔍
-1% - +1%
-0.63ms - +0.83ms
preact-hooks81.49ms - 82.49msunsure 🔍
-1% - +1%
-0.94ms - +0.61ms		unsure 🔍
-1% - +1%
-0.83ms - +0.63ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.32ms - 3.32ms-unsure 🔍
-0% - -0%
-0.01ms - -0.00ms		faster ✔
1% - 1%
0.03ms - 0.03ms
preact-local3.32ms - 3.33msunsure 🔍
+0% - +0%
+0.00ms - +0.01ms		-faster ✔
1% - 1%
0.02ms - 0.03ms
preact-hooks3.35ms - 3.35msslower ❌
1% - 1%
0.03ms - 0.03ms		slower ❌
1% - 1%
0.02ms - 0.03ms		-

run-warmup-0

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main31.61ms - 32.80ms-unsure 🔍
-3% - +2%
-1.00ms - +0.73ms		unsure 🔍
-5% - +1%
-1.54ms - +0.18ms
preact-local31.72ms - 32.97msunsure 🔍
-2% - +3%
-0.73ms - +1.00ms		-unsure 🔍
-4% - +1%
-1.43ms - +0.34ms
preact-hooks32.27ms - 33.51msunsure 🔍
-1% - +5%
-0.18ms - +1.54ms		unsure 🔍
-1% - +4%
-0.34ms - +1.43ms		-

run-warmup-1

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main38.22ms - 39.74ms-unsure 🔍
-2% - +4%
-0.62ms - +1.64ms		faster ✔
0% - 5%
0.00ms - 1.82ms
preact-local37.64ms - 39.31msunsure 🔍
-4% - +2%
-1.64ms - +0.62ms		-faster ✔
1% - 6%
0.45ms - 2.39ms
preact-hooks39.40ms - 40.38msunsure 🔍
-0% - +5%
+0.00ms - +1.82ms		slower ❌
1% - 6%
0.45ms - 2.39ms		-

run-warmup-2

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main29.19ms - 30.03ms-unsure 🔍
-1% - +2%
-0.31ms - +0.69ms		unsure 🔍
-3% - +1%
-0.97ms - +0.18ms
preact-local29.14ms - 29.69msunsure 🔍
-2% - +1%
-0.69ms - +0.31ms		-faster ✔
0% - 4%
0.11ms - 1.06ms
preact-hooks29.61ms - 30.39msunsure 🔍
-1% - +3%
-0.18ms - +0.97ms		slower ❌
0% - 4%
0.11ms - 1.06ms		-

run-warmup-3

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main22.53ms - 23.37ms-unsure 🔍
-1% - +3%
-0.15ms - +0.72ms		unsure 🔍
-2% - +2%
-0.51ms - +0.43ms
preact-local22.57ms - 22.77msunsure 🔍
-3% - +1%
-0.72ms - +0.15ms		-faster ✔
0% - 2%
0.09ms - 0.55ms
preact-hooks22.78ms - 23.20msunsure 🔍
-2% - +2%
-0.43ms - +0.51ms		slower ❌
0% - 2%
0.09ms - 0.55ms		-

run-warmup-4

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main37.59ms - 38.83ms-unsure 🔍
-3% - +1%
-1.31ms - +0.23ms		faster ✔
0% - 5%
0.14ms - 1.80ms
preact-local38.29ms - 39.20msunsure 🔍
-1% - +3%
-0.23ms - +1.31ms		-unsure 🔍
-3% - +1%
-1.15ms - +0.28ms
preact-hooks38.62ms - 39.73msslower ❌
0% - 5%
0.14ms - 1.80ms		unsure 🔍
-1% - +3%
-0.28ms - +1.15ms		-

run-final

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main22.43ms - 22.85ms-unsure 🔍
-3% - +0%
-0.58ms - +0.11ms		faster ✔
0% - 3%
0.10ms - 0.80ms
preact-local22.60ms - 23.14msunsure 🔍
-0% - +3%
-0.11ms - +0.58ms		-unsure 🔍
-3% - +1%
-0.61ms - +0.17ms
preact-hooks22.81ms - 23.37msslower ❌
0% - 4%
0.10ms - 0.80ms		unsure 🔍
-1% - +3%
-0.17ms - +0.61ms		-
03_update10th1k_x16

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main30.28ms - 32.26ms-unsure 🔍
-5% - +4%
-1.49ms - +1.28ms		unsure 🔍
-5% - +4%
-1.41ms - +1.38ms
preact-local30.40ms - 32.35msunsure 🔍
-4% - +5%
-1.28ms - +1.49ms		-unsure 🔍
-4% - +5%
-1.30ms - +1.47ms
preact-hooks30.30ms - 32.27msunsure 🔍
-4% - +5%
-1.38ms - +1.41ms		unsure 🔍
-5% - +4%
-1.47ms - +1.30ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.28ms - 3.29ms-unsure 🔍
-0% - +0%
-0.01ms - +0.00ms		faster ✔
1% - 1%
0.02ms - 0.03ms
preact-local3.29ms - 3.30msunsure 🔍
-0% - +0%
-0.00ms - +0.01ms		-faster ✔
0% - 1%
0.01ms - 0.03ms
preact-hooks3.31ms - 3.32msslower ❌
1% - 1%
0.02ms - 0.03ms		slower ❌
0% - 1%
0.01ms - 0.03ms		-
07_create10k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main934.93ms - 944.35ms-unsure 🔍
-0% - +1%
-4.10ms - +7.16ms		unsure 🔍
-1% - +1%
-5.54ms - +4.95ms
preact-local935.03ms - 941.19msunsure 🔍
-1% - +0%
-7.16ms - +4.10ms		-unsure 🔍
-1% - +0%
-5.68ms - +2.03ms
preact-hooks937.63ms - 942.25msunsure 🔍
-1% - +1%
-4.95ms - +5.54ms		unsure 🔍
-0% - +1%
-2.03ms - +5.68ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main26.32ms - 26.32ms-unsure 🔍
-0% - -0%
-0.01ms - -0.01ms		unsure 🔍
-0% - -0%
-0.03ms - -0.03ms
preact-local26.33ms - 26.33msunsure 🔍
+0% - +0%
+0.01ms - +0.01ms		-unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-hooks26.35ms - 26.35msunsure 🔍
+0% - +0%
+0.03ms - +0.03ms		unsure 🔍
+0% - +0%
+0.02ms - +0.02ms		-
filter_list

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main16.62ms - 16.75ms-unsure 🔍
-1% - +0%
-0.18ms - +0.06ms		unsure 🔍
-0% - +1%
-0.07ms - +0.11ms
preact-local16.65ms - 16.85msunsure 🔍
-0% - +1%
-0.06ms - +0.18ms		-unsure 🔍
-0% - +1%
-0.03ms - +0.20ms
preact-hooks16.61ms - 16.72msunsure 🔍
-1% - +0%
-0.11ms - +0.07ms		unsure 🔍
-1% - +0%
-0.20ms - +0.03ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1.33ms - 1.33ms-faster ✔
0% - 1%
0.01ms - 0.01ms		faster ✔
2% - 3%
0.03ms - 0.03ms
preact-local1.34ms - 1.34msslower ❌
0% - 1%
0.01ms - 0.01ms		-faster ✔
2% - 2%
0.02ms - 0.03ms
preact-hooks1.36ms - 1.37msslower ❌
2% - 3%
0.03ms - 0.03ms		slower ❌
2% - 2%
0.02ms - 0.03ms		-
hydrate1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main86.97ms - 88.62ms-unsure 🔍
-3% - +2%
-2.69ms - +1.62ms		unsure 🔍
-1% - +1%
-0.68ms - +1.11ms
preact-local86.34ms - 90.33msunsure 🔍
-2% - +3%
-1.62ms - +2.69ms		-unsure 🔍
-1% - +3%
-1.27ms - +2.77ms
preact-hooks87.23ms - 87.94msunsure 🔍
-1% - +1%
-1.11ms - +0.68ms		unsure 🔍
-3% - +1%
-2.77ms - +1.27ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main6.10ms - 6.10ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		unsure 🔍
-0% - -0%
-0.03ms - -0.03ms
preact-local6.10ms - 6.10msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-unsure 🔍
-0% - -0%
-0.03ms - -0.02ms
preact-hooks6.13ms - 6.13msunsure 🔍
+0% - +0%
+0.03ms - +0.03ms		unsure 🔍
+0% - +0%
+0.02ms - +0.03ms		-
many_updates

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main16.96ms - 17.35ms-faster ✔
0% - 5%
0.05ms - 0.84ms		unsure 🔍
-3% - +1%
-0.59ms - +0.16ms
preact-local17.26ms - 17.94msslower ❌
0% - 5%
0.05ms - 0.84ms		-unsure 🔍
-1% - +4%
-0.24ms - +0.69ms
preact-hooks17.05ms - 17.69msunsure 🔍
-1% - +3%
-0.16ms - +0.59ms		unsure 🔍
-4% - +1%
-0.69ms - +0.24ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main4.44ms - 4.45ms-unsure 🔍
-0% - -0%
-0.01ms - -0.00ms		faster ✔
1% - 1%
0.03ms - 0.03ms
preact-local4.45ms - 4.45msunsure 🔍
+0% - +0%
+0.00ms - +0.01ms		-faster ✔
0% - 1%
0.02ms - 0.02ms
preact-hooks4.47ms - 4.47msslower ❌
1% - 1%
0.03ms - 0.03ms		slower ❌
0% - 1%
0.02ms - 0.02ms		-
text_update

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main2.51ms - 2.59ms-faster ✔
3% - 7%
0.07ms - 0.18ms		faster ✔
11% - 14%
0.31ms - 0.42ms
preact-local2.63ms - 2.71msslower ❌
3% - 7%
0.07ms - 0.18ms		-faster ✔
6% - 10%
0.19ms - 0.30ms
preact-hooks2.88ms - 2.96msslower ❌
12% - 17%
0.31ms - 0.42ms		slower ❌
7% - 11%
0.19ms - 0.30ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.57ms - 0.58ms-faster ✔
1% - 4%
0.01ms - 0.03ms		faster ✔
1% - 3%
0.01ms - 0.02ms
preact-local0.59ms - 0.60msslower ❌
1% - 4%
0.01ms - 0.03ms		-unsure 🔍
-1% - +2%
-0.00ms - +0.01ms
preact-hooks0.59ms - 0.59msslower ❌
1% - 3%
0.01ms - 0.02ms		unsure 🔍
-2% - +1%
-0.01ms - +0.00ms		-
todo

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main27.00ms - 27.23ms-unsure 🔍
-0% - +1%
-0.10ms - +0.21ms		faster ✔
2% - 4%
0.51ms - 1.09ms
preact-local26.96ms - 27.16msunsure 🔍
-1% - +0%
-0.21ms - +0.10ms		-faster ✔
2% - 4%
0.57ms - 1.14ms
preact-hooks27.65ms - 28.18msslower ❌
2% - 4%
0.51ms - 1.09ms		slower ❌
2% - 4%
0.57ms - 1.14ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.79ms - 0.79ms-faster ✔
1% - 1%
0.01ms - 0.01ms		faster ✔
4% - 4%
0.03ms - 0.03ms
preact-local0.80ms - 0.80msslower ❌
1% - 1%
0.01ms - 0.01ms		-faster ✔
3% - 3%
0.03ms - 0.03ms
preact-hooks0.83ms - 0.83msslower ❌
4% - 4%
0.03ms - 0.03ms		slower ❌
3% - 3%
0.03ms - 0.03ms		-

tachometer-reporter-action v2 for Benchmarks

@coveralls
Copy link

coveralls commented Dec 29, 2023 •
edited

Coverage Status

coverage: 99.468%. remained the same
when pulling 3a4525e on add-back-focus
into e1f0d3e on main.

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 29, 2023 •
edited

Size Change: +269 B (0%)

Total Size: 60 kB

Filename Size Change
dist/preact.js 4.55 kB +46 B (1%)
dist/preact.min.js 4.59 kB +46 B (1%)
dist/preact.min.module.js 4.58 kB +40 B (0%)
dist/preact.min.umd.js 4.62 kB +45 B (0%)
dist/preact.module.js 4.57 kB +46 B (1%)
dist/preact.umd.js 4.63 kB +46 B (0%)
ℹ️ View Unchanged
Filename Size Change
compat/dist/compat.js 3.98 kB 0 B
compat/dist/compat.module.js 3.9 kB 0 B
compat/dist/compat.umd.js 4.04 kB 0 B
debug/dist/debug.js 3.52 kB 0 B
debug/dist/debug.module.js 3.52 kB 0 B
debug/dist/debug.umd.js 3.6 kB 0 B
devtools/dist/devtools.js 232 B 0 B
devtools/dist/devtools.module.js 240 B 0 B
devtools/dist/devtools.umd.js 315 B 0 B
hooks/dist/hooks.js 1.55 kB 0 B
hooks/dist/hooks.module.js 1.59 kB 0 B
hooks/dist/hooks.umd.js 1.63 kB 0 B
jsx-runtime/dist/jsxRuntime.js 963 B 0 B
jsx-runtime/dist/jsxRuntime.module.js 938 B 0 B
jsx-runtime/dist/jsxRuntime.umd.js 1.04 kB 0 B
test-utils/dist/testUtils.js 453 B 0 B
test-utils/dist/testUtils.module.js 454 B 0 B
test-utils/dist/testUtils.umd.js 536 B 0 B

compressed-size-action

@developit
Copy link
Member

perf impact here is not worthwhile IMO, since it impacts performance on every diff regardless of whether focus needed to be restored.

I'd love to come up with a way to have the diff avoid losing focus in this case, but the problem I see is that it would always be specific to focus state. It would never fix things like <video> playback stopping or <iframe> being reloaded. The problem is that it's impossible to determine whether one DOM element is "more stateful" than any other DOM element.

Here's a particularly fun case where, no matter what we do, at least one of the iframes will be reloaded:

function Swapper() {
  const [swapped, swap] = useReducer(s => !s, false);
  
  const a = <iframe key="a" src="/a.html" />;
  const b = <iframe key="b" src="/b.html" />;

  return <>
    <button onClick={swap}>Swap</button>
    {swapped ? [b, a] : [a, b]}
  </>;
}

@JoviDeCroock JoviDeCroock deleted the add-back-focus branch January 5, 2024 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@developit developit Awaiting requested review from developit

@andrewiggins andrewiggins Awaiting requested review from andrewiggins

@marvinhagemeister marvinhagemeister Awaiting requested review from marvinhagemeister

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

Successfully merging this pull request may close these issues.

Focus lost when moving child with key Focus is lost during list re-order
3 participants
@JoviDeCroock @coveralls @developit