Skip to content

Commit e007213

Browse files
committed
perf: skip off-screen ai-msg layout with content-visibility
Toggling the sidebar off/on with a large AI chat history (>1k messages, >10k DOM nodes) causes ~750ms of synchronous reflow on show, because `display: none` drops the layout object and Chromium rebuilds it from scratch. Adding `content-visibility: auto` lets the browser skip layout and paint for messages that are far off-screen; `contain-intrinsic-size` supplies a height estimate so scroll geometry stays stable. Measured on a 1098-message session: show-freeze dropped from ~752ms to ~89ms (~8.5x). Progressive enhancement — browsers without support just ignore the property.
1 parent 6237e5b commit e007213

1 file changed

Lines changed: 5 additions & 0 deletions

File tree

src/styles/Extn-AIChatPanel.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,11 @@
270270
.ai-msg {
271271
margin-bottom: 12px;
272272
max-width: 100%;
273+
// Skip layout / paint for messages that are far off-screen. For a large
274+
// chat history (>1k messages, >10k DOM nodes), showing the sidebar after
275+
// it was `display: none` otherwise costs ~750ms of synchronous reflow.
276+
content-visibility: auto;
277+
contain-intrinsic-size: auto 300px;
273278

274279
.ai-msg-label {
275280
font-size: @sidebar-xs-font-size;

0 commit comments

Comments
 (0)