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

Question

我想知道什么是最佳做法。 假設我有一個下拉選擇小部件。 如果在從服務器提供頁面或加載頁面時預先加載內容，是否應該發出AJAX請求以檢索內容然后填充它？

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

加載的內容量是否重要？

對於下拉示例，我的意思是下拉列表中的選項。 因此，如果我有一個下拉的員工可供選擇，我指的是員工名單。 我是否加載一個空的下拉列表並在控制器的init上檢索員工並填充下拉列表？

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

或者，當從服務器提供頁面時，它會在服務器端檢索數據集，在數據集中它也會創建數據網格，然后加載它。 這是編程世界，我過去常常主要完成PHP，JSP和ASP的工作。 僅使用JavaScript進行一些很酷的頁面效果等。

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

Answer 1

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

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

Answer 2

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

話雖如此，在某些情況下，AJAX可以加快頁面加載速度。 一個示例是文本框的自動完成。 如果在不使用AJAX的情況下實現這樣的功能，則需要網頁在第一次加載時加載每個可能的查詢。 該頁面將永遠加載所有數據。 但是一旦頁面加載，自動完成可能看起來比正常情況更多。

我的建議是從您能想到的最簡單的解決方案開始，然后在需要的后續文章中添加AJAX，緩存和其他優化功能。

Answer 3

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