javascript - 如何从 REST API 高效且定期刷新 Bootstrap 4 表的内容？

Question

我想根据从服务器端获取的值(例如 REST API 资源)刷新 Bootstrap v4 表 ( https://getbootstrap.com/docs/4.0/content/tables )。

我目前正在努力解决以下不同的方法:

• 网络套接字
• 网络 worker
• 递归setTimeout + ajax轮询
• 还有其他更好的解决方案吗？

我的主要要求是每 500 毫秒或更短时间刷新一次(例如股票价格)。

我还想知道如何最有效地处理表格的 DOM 渲染。

Answer 1

Web Workers 无法直接与 DOM 交互，而且您的任务也不是那么密集。

我想说的是 WebSockets + DOM 通过(数据)属性和单独的节点插入进行操作，而不是一次插入大量节点。它可能会慢一点，但没有太大区别，您甚至可能没有注意到它。请参阅Fastest DOM insertion

我会单独更新内容，因为: 1)它更整洁且可维护， 2)您无需担心事件委托(delegate)或特定内容的重新初始化 3)流程感觉更自然，而不是仅仅获取大量标记并将其“粘贴”到 DOM 中。

如果您不会添加新节点，而只是监听现有节点上的数据更改，那么我明确建议进行基于属性的更改。