react-component / select

React Select
https://select.react-component.now.sh/
MIT License
892 stars 451 forks source link

fix: Chrome render perf issue #1045

Closed zombieJ closed 1 month ago

zombieJ commented 1 month ago

fix https://github.com/ant-design/ant-design/issues/48833

之前以为是下拉框的性能问题,做了 diff 后发现没有关系。排查了一下:

当值包含中文时,在 Chrome 下会有巨幅的 layout 性能损耗,推测是中文的渲染问题。对于 Chrome 内核我们做不了,需要考虑做一些 workaround 绕过:

截屏2024-05-09 14 31 13

布局往前,有一个 29 微秒 的样式重绘。导致了巨大的 layout。

截屏2024-05-09 14 31 52

定位到 React 中,查看相关插入节点

截屏2024-05-09 14 32 56

发现节点变化来自于 输入框 部分,的确和 下拉框 无关

截屏2024-05-09 14 33 18

变化来自于 a11y 的 polite 的自动提示相关

截屏2024-05-09 14 34 07

代码中已经进行了空间裁剪,但是 Chrome 里会无视这部分进行全量渲染。考虑到读屏中,使用全量数据没有意义,调整 无障碍 提示量为 50 个。测试后修复:

截屏2024-05-09 14 43 12
vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
select ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 9, 2024 6:44am