[ssr] Add option to defer hydration on top level custom element by augustjk · Pull Request #2940 · lit/lit

augustjk · 2022-05-23T23:51:15Z

Resolve #2938

changeset-bot · 2022-05-23T23:51:17Z

🦋 Changeset detected

Latest commit: f136011

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-05-23T23:51:39Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -1% - +1% (-0.34ms - +0.28ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -3% - +14% (-1.89ms - +10.12ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -1% - +0% (-0.24ms - +0.07ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -2% - +2% (-0.18ms - +0.20ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -1% - +2% (-0.32ms - +0.85ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -7% - +19% (-4.10ms - +11.64ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -0% - +4% (-3.38ms - +24.66ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -2% - +2% (-1.69ms - +1.79ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -10% - +3% (-30.44ms - +11.15ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -0% - +2% (-0.30ms - +2.30ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -5% - +6% (-37.41ms - +41.38ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -0% - +1% (-2.20ms - +5.30ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +1% (-16.84ms - +6.25ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 101.0.4951.64
Sample size: 50
Built by: Benchmarks #3217
Commit: 1b4da92

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	73.06ms - 83.73ms	-	unsure 🔍 -3% - +14% -1.89ms - +10.12ms	faster ✔ 7% - 19% 6.48ms - 17.38ms
tip-of-tree tip-of-tree	71.52ms - 77.03ms	unsure 🔍 -13% - +2% -10.12ms - +1.89ms	-	faster ✔ 15% - 21% 13.09ms - 19.01ms
previous-release previous-release	89.23ms - 91.42ms	slower ❌ 7% - 23% 6.48ms - 17.38ms	slower ❌ 17% - 26% 13.09ms - 19.01ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	679.79ms - 706.79ms	-	unsure 🔍 -0% - +4% -3.38ms - +24.66ms	faster ✔ 37% - 40% 407.38ms - 450.33ms
tip-of-tree tip-of-tree	678.88ms - 686.43ms	unsure 🔍 -4% - +0% -24.66ms - +3.38ms	-	faster ✔ 38% - 40% 422.37ms - 456.61ms
previous-release previous-release	1105.45ms - 1138.85ms	slower ❌ 58% - 66% 407.38ms - 450.33ms	slower ❌ 62% - 67% 422.37ms - 456.61ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	679.47ms - 684.62ms	-	unsure 🔍 -0% - +1% -2.20ms - +5.30ms	faster ✔ 7% - 9% 51.69ms - 63.43ms
tip-of-tree tip-of-tree	677.77ms - 683.22ms	unsure 🔍 -1% - +0% -5.30ms - +2.20ms	-	faster ✔ 7% - 9% 53.17ms - 65.05ms
previous-release previous-release	734.32ms - 744.88ms	slower ❌ 8% - 9% 51.69ms - 63.43ms	slower ❌ 8% - 10% 53.17ms - 65.05ms	-

lit-html-kitchen-sink

Browser: chrome-headless 101.0.4951.64
Sample size: 30
Built by: Benchmarks #3217
Commit: 1b4da92

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	28.96ms - 29.16ms	-	unsure 🔍 -1% - +0% -0.24ms - +0.07ms	faster ✔ 13% - 16% 4.45ms - 5.49ms
tip-of-tree tip-of-tree	29.03ms - 29.26ms	unsure 🔍 -0% - +1% -0.07ms - +0.24ms	-	faster ✔ 13% - 16% 4.36ms - 5.41ms
previous-release previous-release	33.52ms - 34.54ms	slower ❌ 15% - 19% 4.45ms - 5.49ms	slower ❌ 15% - 19% 4.36ms - 5.41ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	77.34ms - 79.85ms	-	unsure 🔍 -2% - +2% -1.69ms - +1.79ms	unsure 🔍 -5% - +1% -4.37ms - +0.90ms
tip-of-tree tip-of-tree	77.34ms - 79.75ms	unsure 🔍 -2% - +2% -1.79ms - +1.69ms	-	unsure 🔍 -5% - +1% -4.40ms - +0.82ms
previous-release previous-release	78.01ms - 82.65ms	unsure 🔍 -1% - +6% -0.90ms - +4.37ms	unsure 🔍 -1% - +6% -0.82ms - +4.40ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	26.08ms - 26.38ms	-	unsure 🔍 -1% - +1% -0.34ms - +0.28ms	faster ✔ 8% - 11% 2.35ms - 3.23ms
tip-of-tree tip-of-tree	25.98ms - 26.53ms	unsure 🔍 -1% - +1% -0.28ms - +0.34ms	-	faster ✔ 8% - 11% 2.26ms - 3.26ms
previous-release previous-release	28.60ms - 29.43ms	slower ❌ 9% - 12% 2.35ms - 3.23ms	slower ❌ 9% - 12% 2.26ms - 3.26ms	-

lit-html-repeat

Browser: chrome-headless 101.0.4951.64
Sample size: 30
Built by: Benchmarks #3217
Commit: 1b4da92

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	10.73ms - 11.00ms	-	unsure 🔍 -2% - +2% -0.18ms - +0.20ms	faster ✔ 11% - 13% 1.32ms - 1.61ms
tip-of-tree tip-of-tree	10.72ms - 10.98ms	unsure 🔍 -2% - +2% -0.20ms - +0.18ms	-	faster ✔ 11% - 13% 1.34ms - 1.61ms
previous-release previous-release	12.29ms - 12.37ms	slower ❌ 12% - 15% 1.32ms - 1.61ms	slower ❌ 12% - 15% 1.34ms - 1.61ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	291.29ms - 320.17ms	-	unsure 🔍 -10% - +3% -30.44ms - +11.15ms	faster ✔ 21% - 29% 81.10ms - 122.54ms
tip-of-tree tip-of-tree	300.41ms - 330.34ms	unsure 🔍 -4% - +10% -11.15ms - +30.44ms	-	faster ✔ 18% - 27% 71.08ms - 113.26ms
previous-release previous-release	392.68ms - 422.41ms	slower ❌ 25% - 41% 81.10ms - 122.54ms	slower ❌ 21% - 37% 71.08ms - 113.26ms	-

lit-html-template-heavy

Browser: chrome-headless 101.0.4951.64
Sample size: 50
Built by: Benchmarks #3217
Commit: 1b4da92

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	52.85ms - 53.67ms	-	unsure 🔍 -1% - +2% -0.32ms - +0.85ms	faster ✔ 15% - 18% 9.78ms - 11.60ms
tip-of-tree tip-of-tree	52.57ms - 53.41ms	unsure 🔍 -2% - +1% -0.85ms - +0.32ms	-	faster ✔ 16% - 18% 10.04ms - 11.87ms
previous-release previous-release	63.14ms - 64.76ms	slower ❌ 18% - 22% 9.78ms - 11.60ms	slower ❌ 19% - 22% 10.04ms - 11.87ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	115.54ms - 117.71ms	-	unsure 🔍 -0% - +2% -0.30ms - +2.30ms	faster ✔ 12% - 14% 15.53ms - 19.18ms
tip-of-tree tip-of-tree	114.91ms - 116.35ms	unsure 🔍 -2% - +0% -2.30ms - +0.30ms	-	faster ✔ 13% - 15% 16.72ms - 19.99ms
previous-release previous-release	132.51ms - 135.45ms	slower ❌ 13% - 17% 15.53ms - 19.18ms	slower ❌ 14% - 17% 16.72ms - 19.99ms	-

reactive-element-list

Browser: chrome-headless 101.0.4951.64
Sample size: 50
Built by: Benchmarks #3217
Commit: 1b4da92

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	59.65ms - 71.35ms	-	unsure 🔍 -7% - +19% -4.10ms - +11.64ms	unsure 🔍 -13% - +13% -8.24ms - +8.32ms
tip-of-tree tip-of-tree	56.46ms - 67.00ms	unsure 🔍 -17% - +6% -11.64ms - +4.10ms	-	unsure 🔍 -17% - +6% -11.60ms - +4.15ms
previous-release previous-release	59.60ms - 71.31ms	unsure 🔍 -13% - +13% -8.32ms - +8.24ms	unsure 🔍 -7% - +19% -4.15ms - +11.60ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	676.91ms - 734.50ms	-	unsure 🔍 -5% - +6% -37.41ms - +41.38ms	unsure 🔍 -2% - +6% -14.58ms - +43.56ms
tip-of-tree tip-of-tree	676.84ms - 730.60ms	unsure 🔍 -6% - +5% -41.38ms - +37.41ms	-	unsure 🔍 -2% - +6% -14.66ms - +39.68ms
previous-release previous-release	687.28ms - 695.15ms	unsure 🔍 -6% - +2% -43.56ms - +14.58ms	unsure 🔍 -6% - +2% -39.68ms - +14.66ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	756.04ms - 772.47ms	-	unsure 🔍 -2% - +1% -16.84ms - +6.25ms	unsure 🔍 -1% - +2% -8.71ms - +14.68ms
tip-of-tree tip-of-tree	761.43ms - 777.66ms	unsure 🔍 -1% - +2% -6.25ms - +16.84ms	-	unsure 🔍 -0% - +3% -3.35ms - +19.91ms
previous-release previous-release	752.94ms - 769.59ms	unsure 🔍 -2% - +1% -14.68ms - +8.71ms	unsure 🔍 -3% - +0% -19.91ms - +3.35ms	-

_{tachometer-reporter-action v2 for Benchmarks}

justinfagnani

🎉

packages/labs/ssr/src/lib/render-lit-html.ts

kevinpschaaf

It might also be nice to add an integration test for this that ensures defer-hydration is actually respected on the top-level element; today we only really test defer-hydration at all transitively in the LitElement tests at the bottom of basic.ts, but not directly.

Testing it in the integration tests would require adding something like an optional serverRenderOptions field to SSRTestDescription and passing it into here. Then you could add a test to basic.ts with deferHydration: true that registers an element and check()s that e.g. an event handler doesn't actually work yet, and then remove the attribute and see that it does?

That could be in a follow-up PR if we don't want to block this, either way.

kevinpschaaf

Looks great!

augustjk added 3 commits May 23, 2022 16:22

Add option to defer hydration on top level CE

0e69e1d

Add changeset

ffd1b1e

Add test for deferHydration

36923db

augustjk requested a review from kevinpschaaf May 23, 2022 23:51

augustjk requested a review from justinfagnani as a code owner May 23, 2022 23:51

augustjk requested a review from aomarks May 23, 2022 23:51

justinfagnani approved these changes May 23, 2022

View reviewed changes

packages/labs/ssr/src/lib/render-lit-html.ts Outdated Show resolved Hide resolved

aomarks approved these changes May 24, 2022

View reviewed changes

Default deferHydration to false and add in comment.

42ff98a

augustjk force-pushed the ssr-defer-hydration branch from 0795e1f to 42ff98a Compare May 24, 2022 00:10

kevinpschaaf approved these changes May 24, 2022

View reviewed changes

Add integration test for deferHydration option

f136011

augustjk requested a review from kevinpschaaf May 24, 2022 20:30

kevinpschaaf approved these changes May 24, 2022

View reviewed changes

augustjk merged commit ac35699 into main May 24, 2022

augustjk deleted the ssr-defer-hydration branch May 24, 2022 21:00

lit-robot mentioned this pull request May 25, 2022

Version Packages #2954

Merged

Conversation

augustjk commented May 23, 2022

Uh oh!

changeset-bot bot commented May 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kevinpschaaf left a comment

Choose a reason for hiding this comment

Uh oh!

kevinpschaaf left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented May 23, 2022 •

edited

Loading

github-actions bot commented May 23, 2022 •

edited

Loading