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

Question

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

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

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

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

那么如何优化这个页面？

Answer 1

这实际上取决于你的实施。

我没有看到你的想法真的很糟糕，所以你遭受如此大的延迟的事实告诉我你的代码有些不对劲，可能是开销过多，也许是操纵DOM的错误方法...但由于您没有提供任何代码，我们无法说出来。

我能想到的唯一可以解决这个问题的是你有一个真正庞大的元素列表，这个元素很大，你的客户端机器需要几分钟来加载它们。如果是这种情况，你可以做的只是部分加载它们。

获取最后200个元素并将其发布到窗口中。

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