如何優化網絡聊天頁面，如圖所示

Question

我想構建一個網頁聊天頁面，如下圖所示。

我可能會選擇三個朋友交談，並且有一位朋友正在與我交談。顯示聊天信息的列表可以摺疊和展開。清單應該會刷新，這意味着會有很多項目可能有200個或更多。

當我將User1切換到User2時，聊天信息列表將清除所有項目並添加顯示I和User2之間的聊天信息的其他項目。

現在我已經達到了這個目標，但是我遇到了一個問題：如果我和User2之間的項目太多，並且如果將User1切換到User2，它將等待幾分鐘。

那麼如何優化這個頁面呢？

Answer 1

這真的取決於您的實施。

我沒有看到你的想法沒有什麼不好，所以你遭受如此大的延遲這一事實表明，你的代碼有錯誤，也許開銷太多，也許是一種錯誤的方式來操縱DOM ...但是因爲您還沒有提供任何代碼，所以我們不能說。

我能想到的另一個可能會導致這個問題的原因是，您擁有一個非常龐大的元素列表，如此之大以至於您的客戶端計算機需要幾分鐘來加載它們。如果是這種情況，你可以做的只是部分加載它們。

獲取您的最後200個元素並將它們發佈到窗口中。

然後，在滾動事件上，準備一個檢索其他200個元素的函數。這樣，如果您的客戶端用戶正在請求它們，您只會將元素加載到窗口中。