easysoft / zui

ZUI is an HTML5 front UI framework.
https://openzui.com
MIT License
2.71k stars 690 forks source link

数据表格2,垂直滚动没有水平滚动平滑? #158

Open kayfong opened 4 years ago

kayfong commented 4 years ago

无论数据量大小,不管鼠标滚动还是拖动垂直滚动条,都没有拖动水平滚动条平滑,感觉非常卡。 貌似水平并没有人为限定刷新策略,而垂直使用了固定刷新率来渲染结果,防止CPU使用率太高,其实这样的限制还有优化的空间。参考第三方前端框架,比如layui/viewui,垂直滚动都很流畅。

kayfong commented 4 years ago

即使设置 scrollDelay 为0,也就是默认值,滚动依然不平滑。

catouse commented 4 years ago

谢谢反馈。因为垂直滚动会动态处理数据,导致可能有些卡顿,后面可以在优化为在滚动停止后才更新界面来提升流畅度。

kayfong commented 4 years ago

粗略观察了下zui表格的垂直滚动实现,每次拖动或滚动,都会计算每一行的top值,并赋值给响应的div元素,计算量确实非常大,为了避免瞬时计算量过大,还可能加了delay机制。

如果在停止滚动后再更新界面,计算量会下降,但肯定不能实时滚动。

如果使用原生的滚动则会非常流畅,zui行列均使用div实现,而layui和viewui使用的都是真实的table,超出父元素范围使用原生的滚动条,就非常流畅。

zui功能确实强大,表格是使用率最高高级组件,100%高度和垂直滚动流畅性问题是非常值得优化的地方。另外还可加入按住shift键,水平滚动的功能。