Repository navigation
perf(frontend): reduce main-thread work while dock dialogs are open - #201
Merged
Merged
Conversation
- Dialog: use a proper controlled/uncontrolled open state instead of mirroring the open prop into local state through an effect, and memoize the context value so consumers stop re-rendering on every parent render. - DialogOverlay: promote the backdrop-blur overlay to its own compositor layer so hover-driven dock animations no longer re-blur the whole page. - TabsList: observe only data-state changes on direct children instead of every attribute mutation in the subtree, and schedule the initial read in an animation frame. - TabsContents / MarkdownEditor: coalesce resize-driven state updates into a single animation frame and cancel it on unmount; skip state updates when the line mapping is unchanged. - MotionHighlightItem: skip bounds measurement for inactive items.
The per-item effect no longer calls clearBounds, so move the reset into the parent where activeValue is owned. Bounds are cleared only when activeValue becomes null; switching between items keeps the highlight so it can animate to the new position.
Contributor
Author
|
@yyg-max review 一下 pls |
chenyme
approved these changes
Sep 25, 2026
|
此 PR 长期无活动,将在 14 天后自动关闭。如需继续讨论请回复 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
例行检查
变更内容
Dialog:改为标准受控/非受控模式,不再用 effect 把openprop 镜像到本地 state;context value 用useMemo固定,避免消费者跟随父组件重渲染。DialogOverlay:加will-change-transform transform-gpu,让模糊遮罩独立成合成层,dock 动画不再触发整屏重新模糊。TabsList:只监听直接子元素的data-state属性,初次读取放到requestAnimationFrame。TabsContents/MarkdownEditor:resize 触发的 state 更新合并到单个动画帧并在卸载时取消;行映射未变化时跳过setState。MotionHighlightItem:非激活项不再逐个测量 bounds;高亮块的清空逻辑上移到父组件,仅在没有激活项时触发。不涉及任何动画参数(时长、曲线、缩放比例均未改动)。
变更原因
打开 dock 上的「快速创建」或「个人信息」弹窗后,即使不做任何点击,鼠标在 dock 上移动时图标缩放动画会明显掉帧。Chrome Performance 录制显示两类开销:
backdrop-blur,dock 每帧缩放都会让整屏重新模糊。DateTimePicker内 144 个SelectItem乘以两个 picker),TabsList的MutationObserver监听子树所有属性变更,TabsContents与MarkdownEditor用setTimeout(0)触发 resize 更新且不做去重。