爲其他頁面預加載外部文件（CSS，JavaScript）

我很好奇是否有一種有效的方法來等待站點的首頁加載，然後預加載我知道的CSS和腳本文件將可能需要在網站上的其他頁面。爲其他頁面預加載外部文件（CSS，JavaScript）

我希望網站的首頁儘可能快（精益和平均）。用戶很可能不會立即點擊鏈接。由於可能會有一些空閒時間，這似乎是預先加載部分外部資產的適當時機。預加載應該會導致它們被緩存。當用戶點擊另一個頁面時，唯一需要的將是內容和可能的一些圖像等。

有沒有人這樣做？這是一個壞主意嗎？有沒有一種優雅的方式來實現它？

2009-06-29 Jason Young

這是一個有趣的想法，我不確定是否可以通過Javascript完成（至少CSS部分）。

您可能將與要加載其他資源頁面上的IFRAME，但把一些CSS它來隱藏它...

.preload { 
    position : absolute; 
    top  : -9999px; 
    height : 1px; 
    width : 1px; 
    overflow : hidden; 
}

如果你把這個頁面的結束那麼我會認爲它會加載後頁面的其餘部分。如果沒有，那麼你可以使用一些Javascript和setTimeout來實際創建頁面加載後的IFRAME。

來源

2009-06-29 18:43:09 Hugoware

我也嘗試在jQuery的使用$（窗口）.load（XXX）。它效果很好。感謝iFrame的想法！預加載一些巨大的圖像，並立即加載下一頁。我可以看到這個用途！ – 2009-06-29 21:11:46

這取決於你做出帶寬決定。

如果您預先加載所有內容，您將獲得更好的用戶體驗，但會帶來非常高的帶寬消耗，因爲用戶可能永遠不會使用已加載的內容，因此效率非常低。

如果您沒有預先加載任何內容，則會使用最小帶寬，並且用戶只需加載即可，它只需要即可。

來源

2009-06-29 18:43:28

如果你只是想將它們加載到瀏覽器的緩存中，我想你可以通過隱藏的iframe中的文檔來做到這一點。

來源

2009-06-29 18:43:36

人們正在倡導的隱藏iFrame理念將會工作得很好。

如果登陸頁面的頁面加載時間也是優先級，那麼要做的事情就是在頁面加載完成後動態地在JavaScript中創建iFrame。

來源

2009-06-29 18:46:15

您可以像這樣預取任意文件（CSS，圖像等），問題是小的回報和增加的帶寬成本是否使它成爲現在追求的正確優化。 The Yahoo performance rules是一個很好的起點。如果這是您的第一次性能優化，那麼您可能會從錯誤的地方開始。這絕對是一種主要權衡（增加的帶寬）的優化，而其他優化（如「最小化HTTP請求」）的成本更低，可能會帶來更大的回報。

要以跨瀏覽器兼容的方式執行此操作，您將基本向您的頁面的onload事件添加代碼，以創建DOM對象（如an），並將其src設置爲您要預取的URL。請注意，因爲大部分訪問者可能只訪問您的首頁，他們永遠不會請求您預先加載的文件。我已經看到，這樣做的預加載會導致預取文件的請求和帶寬增加數倍。

來源

2009-06-29 18:55:16 aem

我認爲你應該分析用戶在主頁面登陸後到達另一個頁面的時間。

然後檢查主頁上的哪些鏈接最常出現，並在主頁面/ OnLoad事件中觸發定時器函數setTimeOut，該函數將執行輔助函數，併爲最可能的下一個鏈接預加載代碼。

來源

2009-06-29 18:55:42 AlexA

我同意Gareth，我會動態地創建iframe。您需要將此代碼作爲着陸頁上最後一件事。

E.g：

.... 
    <script type="text/javascript"> 
    preloadContent(); 
    </script> 
</body> 
</html>

至於高速緩存，這實際上取決於你的設置。但是在Yahoo!上的參考網站應該是一個好開始：http://developer.yahoo.com/performance/rules.html#expires 簡而言之，一個好方法是讓你的靜態文件（CSS，圖像，甚至可能是腳本）具有1年的到期日期。這樣，您的客戶端所提取的任何內容都將保存在瀏覽器緩存中，而無需檢查新版本。

如果做已修改文件：年底