從PHP或Javascript加載HTML？

我正在開發一個非常大型/複雜的單頁應用程序，我正在嘗試不同的技術來加速我的表現。從PHP或Javascript加載HTML？

我的應用程序使用了許多ui小部件（都來自jquery ui和jqWidgets庫），目前我加載所有的html並在頁面加載時初始化所有小部件（無論是否使用小部件，即彈出窗口被初始化並保持隱藏直到被調用）。

我意識到我可以節省一些資源，只需在用戶需要之前加載用戶將使用的小部件即可，非常標準。所以我基本上有兩個選擇：

1.）我可以將所有的HTML移動到注入（附加）相關html的javascript文件，然後在調用widget之前初始化小部件，類似於此：

$("#widgetWrapper").append("<div id='newWidgetID'></div>"); 
$("#newWidgetID").methodToCreateWidget();

2.）我可以做基本上與上述相同，不同之處檢索來自通過AJAX服務器的HTML。

優點/缺點

我不精通的客戶端 - 服務器的性能，但我看到一些明顯的優點和缺點在這裏，由HTML移動到一個JavaScript文件，做我所有的DOM操作，我不會減少我的網站在頁面加載時需要的數據量，我只是將數據從html主體轉移到js文件，但是我會大大減少初始DOM元素的數量。

我唯一害怕方法是一個慢客戶端 - 服務器連接可能會導致我的用戶界面響應時間不平凡的延遲。

有沒有關於如何解決這個問題的建議？我嚴重傾向於方法，行業標準是什麼？或者我應該只是說「和它在一起」，然後繼續加載並初始化所有內容（等待登錄，但快速響應），並希望瀏覽器在JS性能方面繼續突飛猛進（與IE當然是例外）。

來源

2014-01-08 A.O.

混合1和2解決方案可能是您的最佳選擇。使用ajax調用僅檢索「數據」和JS函數，以便在需要時將此數據轉換爲完整的HTML界面。

來源

2014-01-08 19:30:10 cubitouch

我認爲你需要看看你的觀衆是什麼。我也會傾向於＃1，原因很簡單，當你真正需要時加載某些東西更方便用戶使用，尤其是對於漫遊連接的用戶。一個討厭的副作用，可進行個性化的內容，則需要以防止緩存：http://api.jquery.com/jquery.ajax/

＃1在我看來是優越的，因爲它降低了初始負載時的帶寬，降低了初始加載的DOM裝載（從而提高了很多對於使用舊瀏覽器和較慢連接或移動設備的用戶）。缺點是並不是所有的「框架」或「窗口小部件」都是在頁面加載時加載的，但我會認爲這是理所當然的一個小微調或類似的東西。

來源

2014-01-08 19:32:46

好吧，我在假設用戶寧願等待幾秒鐘，並在登錄時預先下載一些額外的MB，然後在整個與應用程序的交互過程中不斷有一堆延遲1秒的操作？我應該堅持這一理念嗎？ –

想一想：如果你正在加載靜態數據（因爲它是一個1頁的應用程序），並且需要4秒鐘才能下載20個小部件，每個小部件只需要加載200毫秒，最重要的是，你如果它們真的是靜態的，它們將具有緩存版本。 –

閱讀完您的問題後，我認爲您忽略了最簡單的答案。您目前正在考慮在加載頁面時加載所有內容，或僅在需要之前加載。在第一種情況下，您最終會增加您的網頁加載時間，而第二種情況會在UI響應中帶來明顯延遲。

您的解決方案是在覈心功能準備就緒後立即加載額外的東西，這意味着UI將準備好進行交互，而額外的功能正在後臺加載。

因此，您的腳本應該有點像這樣：

// Code that has to run while the page is loading 
/* YOUR CODE */ 
// Code that has to run when the DOM is ready 
$(document).ready(function(){ 
    /* YOUR CODE */ 
}) 
// Code that has to run when the core functionality has been loaded 
$(window).on('load',function(){ 
    /* YOUR CODE */ 
})

通過在第三部分將您的Ajax調用，它們是由核心UI只加載後，從而加快您的初始加載時間不冒着UI延遲的風險。您應該正確編程您的應用程序，以確保您不會嘗試調用任何「額外」功能，直到它已被加載。

來源

2014-01-08 19:45:40 Entoarox

這仍然意味着即時下載附加代碼。在移動連接的情況下，你不想立即下載整個世界，只有當它實際需要時：D –

@Anyone爲移動設備製作實際的網絡應用程序目前不值得花費它的成本（巨大的兼容性和性能這些問題讓dev2們不禁要問，IE6的易調試是如何通過同步進行的），所以我不得不假設，因爲他正在開發它，看起來是單獨的，它的目的是用於計算機使用。 – Entoarox

@Entoarox你是對的，這個程序不會在移動設備上使用。而且，我已經實現了一個類似於您所描述的策略，我只是顯示一個模式加載窗口（微調），直到加載桌面/儀表板部分，然後加載其餘部分。我期望只在需要時加載資源的原因是因爲我的DOM計數高達+50,000是有些情況。對於大多數用戶來說，這很容易被削減一半，因爲很多小部件並不常用...... –

從PHP或Javascript加載HTML？

回答

相關問題