html5：一個很好的加載方法？

Question

我正在寫我的第一個HTML5 + jquery.mobile網絡應用程序。 該應用程序基本上是一個重定向到同一index.html中定義的內部頁面（data-role =「page」）的菜單。我不寫網頁作爲外部文件，以避免重新加載和重寫 - 實質上 - 相同的<頭>：我想跳到一個內部標籤比加載一個新頁面更快...

現在，我有一個頁面這需要一些特定的jQuery插件和一些特定的CSS。沒有其他頁面需要這些插件或CSS。

當然，我可以加載這些js/css在<主目錄>部分，但這種方法會減慢首頁加載的速度，無用。

我可以解決CSS的問題，與：

$('head:first').append('<link rel="stylesheet" type="text/css" href="' + file + '" />'); 

我甚至可以解決JS問題，但僅限於 '標準' 的JavaScript，喜歡的東西：

<script> 
    $(document).ready(function() { 
     $('#page-availability').live('pageinit', function() { 
      $.getScript("js/jqm-datebox.core.js"); 
      $.getScript("js/jqm-datebox.mode.calbox.js"); 
      $.getScript("js/jquery.mobile.datebox.i18n.en.utf8.js"); 

      $('#datepicker').data({ 
       "mode": "calbox", 
       ... 
      }); 
      ... 
     }); 
     ... 
    }); 

不幸這種方法似乎不工作（firebug croaks：「TypeError：a.mobile.datebox是未定義的......」）與jquery插件：它看起來像他們沒有評估......（即使他們在那裏，在結束之前<的頭部>部分，在「生成 資源」...）。

我使用Firefox（15）調試，但我想這不是重點...

任何提示？

Answer 1

的一個頁面的方法可以用於移動是一件好事，如果：

1. 你不必爲了支持所有的用戶可能會從一個頁面顯示的內容加載太多額外的內容。
2. 您不必加載太多代碼來支持所有行爲。
3. 典型的用戶實際上會去幾個不同的虛擬頁面，所以這個方案可以節省他們的加載時間，並在後續的虛擬頁面加載時使事情更快。

做得很好，用戶在加載第一頁時獲得了良好的性能，並且在轉到其他「嵌入」頁面時不需要通過網絡加載新內容的情況下性能非常快。

的一個頁面的做法也不是那麼好當：

1. 初始加載時間剛好超過這是因爲必須加載的東西體積的價值。
2. 無論如何，您必須動態加載子頁面的內容。
3. 你有SEO問題，因爲搜索引擎不能真正找到/正確索引你所有的虛擬頁面。

所以，最終，這是一個真正的折衷，它非常依賴於事情有多大，你裝載了多少東西以及實際性能如何。如果頁面保持非常輕量級並且每個頁面必須滿足的請求很少，那麼一個緊湊的移動網站可以非常快速地從一頁到另一頁提供服務器加載的頁面瀏覽。

一般情況下，你想追求這些類型的優化：

1. 壓縮/縮小所有的JavaScript。
2. 減少必須加載的單獨項目的數量（樣式表，JavaScript文件，圖像）。
3. 減少必須加載的順序事件的數量（加載一個，等待加載，加載另一個）。移動在往返旅行和裝載大量資源方面不好。加載一些東西可以。
4. 讓瀏覽器可以輕鬆地緩存JavaScript文件。使用幾個常見的JavaScript文件，每個文件都滿足多個頁面的需求。在開始時加載一點點，然後允許JavaScript文件從緩存加載到所有未來頁面加載是方式，如果用戶將訪問您的網站上的許多連續頁面，方式會更好。外部CSS文件也是如此。
5. 非常非常小心很多圖像，甚至小圖像。許多http請求爲了加載頁面對移動設備上的加載時間不利，並且您請求的每個圖像都是一個http請求（除非它來自瀏覽器緩存）。
6. 確保您的服務器配置爲最大化瀏覽器緩存，以便可以有效緩存的內容。

其他的事情需要注意的：

1. 通過腳本文件的默認動態加載是異步的，無序的。如果您的腳本文件必須以特定順序執行，那麼您將不得不動態加載它們，否則您將不得不編寫代碼（或使用庫），以期望的順序將其執行序列化。

Answer 2

$ .getscript是一個簡寫AJAX函數，它將回調作爲第二個參數。 查看文檔： http://dochub.io/#jquery/jquery.getscript

你可以連接這些腳本，然後在回調中做你的東西。

Answer 3

這與舊版Flash資產加載問題並無太大差別。

我的策略是什麼？僅加載初始頁面視圖所需的內容。當它的加載和頁面/應用程序可由用戶查看時，逐步加載所有其他資產。

如果資產特別沉重，那麼我會禁用指向該特定頁面的鏈接，直到其所需的資產被加載。

在這種情況下，您可能會在一開始就禁用到特定頁面的鏈接，啓動其資產的加載，並且當它們準備就緒時，啓用該鏈接。

不知道你是否有任何語法問題，但你當然可以用正確的源代碼注入一個新的腳本元素到頭部，它會激發下載（就像你在用css做的一樣。知道; d）

乾杯

Answer 4

我只想合併/縮小和壓縮所有JS在一個文件中，總是加載。這是（正確的緩存），只下載一次，所以你不必擔心性能。

Of course I could load these js/css in the main section

我經常只是在</body>和標記之前加上它。還要注意的是，除了.live()是deprecated這個事實，它也是slow as hell。所以不要使用它，但使用.on()。