一个表格渲染的性能问题(Antd的Select组件相关)

497 阅读1分钟

一个性能问题,切换表格分页时,发送请求时有loading效果,但是loading效果的出现有明显延迟。每页100条时有这个问题,每页10条时没有。

打印时间戳发现,setState设置显示loading后,render的速度较慢,有大约600ms的延迟。

页面渲染速度慢,首先发现表格中有一个antd的Select组件,里面有两千项,可能是问题所在。进一步定位发现,这个组件用了虚拟长列表,所以实际节点数并不多。

我想不通过render去显示loading,直接通过调用函数的方式显示loading,但是发现loading组件没有提供这种调用方式。

然后尝试把表格中的Select组件去掉后,问题消失,说明瓶颈还是在这里。进一步发现,antd的文档中对options属性的说明:“数据化配置选项内容,相比 jsx 定义会获得更好的渲染性能”。

将Select的选项由jsx定义改为使用options属性,render速度提升明显,延迟减到200ms,无明显感知。

这里还有另一个问题,切换分页时,先修改currentPage,在setState的回调中再发请求获取Select组件的选项,这没有必要,两者没有先后关系,而且也造成200ms延迟,已修改。