服務器端與客戶端（AJAX）加載

Question

我想知道什麼被認爲是最佳實踐。假設我有一個下拉選擇小部件。當頁面從服務器提供或加載後，是否應該預加載內容，是否應該發出AJAX請求來檢索內容並填充它？

我有點喜歡加載它爲空的想法，併發出一個AJAX調用來檢索內容。但是這會導致頁面加載時間變慢。特別是如果頁面有幾個小部件需要從服務器加載內容？

對於正在加載的內容的數量有影響嗎？

對於下拉的例子，我的意思是下拉選項。所以，如果我有一個員工下拉選擇，從我指的是員工名單。我是否加載一個空白下拉列表，並在控制器的init中檢索員工並填充下拉列表？

但是後來我想到了一個數據網格，讓我們說200行emplyees和一些存儲在數據庫中的員工數據。我是否加載頁面，並在頁面加載時有一個控制器，其init函數檢索員工數據集並填充和顯示數據網格？

或者當從服務器提供頁面時，它會檢索服務器端的數據集，並在其中創建數據網格，然後將其加載。 這是我過去主要使用PHP，JSP和ASP的編程世界。只使用JavaScript的一些很酷的頁面效果等

但我似乎喜歡一旦頁面加載（或正在加載），使AJAX請求檢索所需的數據填充窗口小部件/內容的想法當前屏幕。我只關心加載頁面可能看起來笨重或緩慢，因爲我現在向服務器發出更多請求來繪製頁面。初始請求頁面，然後請求填充小部件所需的每個數據集。

Answer 1

正如您指出的那樣，使用AJAX加載所有內容會導致頁面變慢。實際上，加速網頁的最佳實踐之一就是減少http請求的數量。

這就是說，有些情況下，AJAX使頁面加載速度更快。一個例子是自動完成文本框。如果在不使用AJAX的情況下實現此功能，則需要網頁在第一次加載時加載每個可能的查詢。該頁面將永久加載所有的數據。但是一旦頁面加載完成，自動完成可能會比平常更加反應。

我的建議是從最簡單的解決方案開始，然後在需要後綴的地方添加AJAX，緩存和其他優化功能。

Answer 2

這取決於你顯示的數據，如果你想從數據庫中快速更新Ajax方法是好的。 但是，如果你的數據是固定的（或者你不關心一旦頁面加載後更新它），那麼我不應該用ajax方法，更多的工作（請求json，解析它，填充選擇或其他）你並沒有獲得太多的好處。

Answer 3

我認爲最好的答案是「這取決於你的框架」。我見過兩種處理這個問題的web框架。我認爲，特別是當大量數據被填充到DOM中時，從性能的角度來看，最好在初始HTTP響應中儘可能多地加載頁面，並且只根據需要通過AJAX進行更新。請注意，對於大型數據集，與通過JavaScript執行大量DOM操作的影響相比，附加HTTP請求的性能開銷相對較小 - 在某些瀏覽器中，DOM操作可能非常緩慢。

如果您添加您正在使用的框架，您可能會得到更詳細的答案。