fix: Chrome render perf issue #1045
Merged
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
fix ant-design/ant-design#48833
之前以为是下拉框的性能问题，做了 diff 后发现没有关系。排查了一下：
当值包含中文时，在 Chrome 下会有巨幅的 layout 性能损耗，推测是中文的渲染问题。对于 Chrome 内核我们做不了，需要考虑做一些 workaround 绕过：
布局往前，有一个 29 微秒 的样式重绘。导致了巨大的 layout。
定位到 React 中，查看相关插入节点
发现节点变化来自于 输入框 部分，的确和 下拉框 无关
变化来自于 a11y 的 polite 的自动提示相关
代码中已经进行了空间裁剪，但是 Chrome 里会无视这部分进行全量渲染。考虑到读屏中，使用全量数据没有意义，调整 无障碍 提示量为 50 个。测试后修复：