虚拟数据滚动，双向绑定数据（动态和实时更新），javascript中的可变行高

Question

对于正在工作的项目，我们需要能够为超过50,000个动态事件（实时数据更新）实现虚拟滚动。正如您所料，将所有50,000个事件粘贴到角度范围内（但只显示100次）会导致浏览器死亡......好吧它暂时无法使用。我们需要实现以下功能：

• 数据必须具有双向绑定。如果我更新我的模型，我希望看到网格中的更改。例如：
  • 当套接字服务器将新事件推送到客户端时，我们想将其添加到网格中（如果滚动条位于网格的底部，否则我们将在用户滚动到网格时获取新事件底部）。
  • 如果事件在视口中并且模型发生更改，则相应地更新事件数据
• 能够在网格中注释条目并在相关事件下方推送注释
• 删除条目并从模型和视口中删除条目
• 行的高度可以不同（不是必须，但会很好）
• 如果我调整窗口大小，请尝试将尽可能多的事件放入屏幕视图端口，并为每页的项目更新模型。如果我没有固定的行高，那么这实际上是不可能的。

我们已经查看了许多实现虚拟滚动的库，例如jqxGrid，SlickGrid来命名一对

我们查看的所有内容都在同一个premise上工作：

• 对于给定的行X，该行的顶部偏移量是多少？
• 对于给定的偏移量Y，该偏移量是哪一行？

当你使用静态行高时，回答这些问题是微不足道的;但是，对于动态行高，实现开始变得非常困难。

此外，没有人支持动态更新。如果要进行动态更新，则必须重新计算行偏移量。

很高兴听到你的想法，看看你将如何尝试实现它 - 至少对我而言，这根本不是微不足道的。