如何优化网络聊天页面，如图所示

Question

我想构建一个网页聊天页面，如下图所示。

我可能会选择三个朋友交谈，并且有一位朋友正在与我交谈。显示聊天信息的列表可以折叠和展开。清单应该会刷新，这意味着会有很多项目可能有200个或更多。

当我将User1切换到User2时，聊天信息列表将清除所有项目并添加显示I和User2之间的聊天信息的其他项目。

现在我已经达到了这个目标，但是我遇到了一个问题：如果我和User2之间的项目太多，并且如果将User1切换到User2，它将等待几分钟。

那么如何优化这个页面呢？

Answer 1

这真的取决于您的实施。

我没有看到你的想法没有什么不好，所以你遭受如此大的延迟这一事实表明，你的代码有错误，也许开销太多，也许是一种错误的方式来操纵DOM ...但是因为您还没有提供任何代码，所以我们不能说。

我能想到的另一个可能会导致这个问题的原因是，您拥有一个非常庞大的元素列表，如此之大以至于您的客户端计算机需要几分钟来加载它们。如果是这种情况，你可以做的只是部分加载它们。

获取您的最后200个元素并将它们发布到窗口中。

然后，在滚动事件上，准备一个检索其他200个元素的函数。这样，如果您的客户端用户正在请求它们，您只会将元素加载到窗口中。