问题
ResizeObserver loop completed with undelivered notifications
常常出现在react中 Ant-design 或 vue中使用element-ui 的Table(DataGrid)组件中,主要表现是浏览器渲染页面时,Table表格的表头表体的每个单元格宽度循环计算导致页面多次渲染。
原因
报错的原因:在页面绘制的时候,页面内组件或DOM循环调整大小的事件,导致了样式和布局都需要重新评估,这个调整大小导致的布局变化,将延迟到下一帧来绘制,如此循环导致浏览器告警。
出现版本: antd 版本大于等于 4.0 的时候 会出现,小于antd 4.0 不会出现,【官方说展开行不能和固定列一起使用】,
关于 ant design 4.0 的问题可以参考知乎专栏
影响
该错误对业务代码不会产生错误或中断,业务代码能正常执行。控制台不会报错。主要影响时开发阶段全屏提示,说明代码中的循环渲染影响了浏览器的性能。
解决方案
方法1
去掉滚动属性中 x
的横向滚动:scroll={{x: 'max-content'}}
,让宽度自适应。
方法2
对dataSource 中的值设置未 [{}]
,这个时有副作用的。会导致列表中有一条的空数据。columns={[]} dataSource={[{}]}
方法3
升级andt 的版本到最新,官方已经解决该问题了。