我正在使用 FlexTable 的 GWT 项目。显示一些数据。我知道我们可能应该使用 CellTable因为它具有更好的性能,但 FlexTable 更容易设置样式(设置特定单元格的样式)并且更容易更新特定单元格。
为了接收我们正在使用 WebSockets 的表的更新。我们现在面临的问题是当每秒有超过 100 次更新通过 WebSockets 时,CPU 负载很高。来自 WebSocket 连接的每条消息都包含表中多个单元格的更新。所以在实践中,每秒应该在 FlexTable 中呈现超过 100 次更新。我的 3GHz i5 和 4GB RAM 的 CPU 负载约为 50%。如果我禁用数据的实际呈现(注释掉 setText() 方法调用),那么 CPU 负载会下降到 5-10%。所以我知道 DOM 更新是瓶颈,而不是代码的其他部分。
会不会更好
有没有更好的方法来实现表格和提高性能?
如果有人对 FlexTable 有类似的问题,我曾尝试用谷歌搜索,但发现只是普遍认为它很慢,没有什么特别的。我们有纯粹用 JavaScript 完成的应用程序原型(prototype),同样每秒 100 次更新,CPU 负载约为 15%
更新
删除我们用来指示单元格值变化的 css 淡入淡出效果将 CPU 负载降低了约 10%。所以看来 DOM 并不是唯一的问题。
最佳答案
使用 CellTable 您必须重新渲染整个表格才能更新单个单元格。但是,这样的更新将是对 DOM 的一次更新。使用 FlexTable,即使您将所有更新批处理在一起,您也将执行一系列单独的 DOM 操作。因此,即使使用 CellTable 可能看起来效率低下,因为您冗余地更新了一些单元格,但仍然值得切换。尤其是在您更新的单元格数量接近单元格总数的情况下:将 100 次更新一起批处理,然后一次完成一次 DOM 写入。
我有一个带有 CellTable 的应用程序,它可以大到 30x100。它在任意单元格上具有任意样式,每个单元格都有复杂的内容(<img>
、一些 <div>
和一些文本),有时我需要更新单个单元格。在我的 macbook pro 开发模式下,重绘整个东西是不明显的(以我的人类感知)。
如果您想要实时更新(例如每秒 100 次更新,因为它们发生了),那么我认为您可能想要一个不同的平台。甚至您的显示器也没有每秒刷新 100 次。
关于GWT FlexTable 性能和优化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8065304/