內聯與包含的js和CSS？

Question

在2G移動連接上至少有500ms延遲（約0.1mbps）的環境中，最快和最有效的方法是在服務器上以大約5-10個文件的形式將大約10kb的CSS和js發送到客戶端嗎？

我可以想到三種選擇：

1. 將所有js合並到一個文件，將所有CSS合並到一個文件
2. 一對一鏈接所有css和js文件
3. 內聯一切

我知道google使用內聯，但這可能只是為了節省服務器套接字。 他們甚至通過在無狀態模式下運行來節省內存-他們信任客戶端為他們記住會話。 服務器電源根本不是問題。

另一方面，facebook似乎可以自動生成其css（它們的名稱是base64編碼的），但是可以發送到發送給用戶的10多個不同的文件中，而且它們似乎並沒有對其進行大量優化。 僅刪除一些空格。

我已經通過壓縮所有內容的函數傳遞了所有文件，因此其中任何一個都是可行的。 我不想選擇第一個替代方法，因為它更容易。

前兩個利用了緩存的優勢（第二個比第一個少一點），但是第二個只需要對服務器的三個請求，而第三個只需要一個來自服務器的get請求（忽略了我們可能擁有的少量映像）一些頁面）。

Android / iOS是否在瀏覽器重新啟動時緩存js和CSS？ 如果沒有，那么內聯聽起來更好。

唯一的目標是最大程度地減少用戶的平均加載時間。 每個用戶每天將在網站上花費大約100個頁面加載，每天會看到大約40個CSS和JS文件。 CSS和JS基本上是靜態內容。 它設置為緩存30天，如果文件使用/path/to/file.ext?md5-hash-of-file更改，我們將更改url。 此外，一切都將在所有可能的地方壓縮。

編輯：

我認為我應該澄清為第二個發現的兩個選項。 在整個網站上為CSS和JS使用單個文件是個好主意嗎？ 它只會使用兩個請求並刪除任何雙重（或七元組）緩存，因為單個功能位於兩個或多個不同的組合js文件中，但是下載多達1MB的聲音聽起來並不好。

今天，它基本上是每個視圖結合在一起的CSS，因此，每次您再次查看同一頁面時，都會緩存內容。 但是，在多個頁面上使用了一些js和CSS。

Answer 1

內聯css和javascript將使您的頁面變得沉重。將所有樣式表和所有javascript文件合並為一個並將其包含到頁面中是一種很好的做法。與內聯樣式相比，這會使您的頁面非常快速。

Answer 2

這實際上取決於用法。 對於只有一次訪問者的頁面，我建議內聯所有內容。 這樣可以提高初始加載速度（單個請求與多個請求），並且更易於使用。 登陸頁面，幫助頁面，向導和類似的一次性頁面就是這種情況。

但是，如果您希望經常性訪問者 ，我建議您使用外部文件。 雖然第一次加載的速度較慢，但​​是您隨后為這些資產添加了接近零的加載時間。 大多數網站都是這種情況。

Answer 3

鏈接到每個文件的＃2問題在於，小元素加載時間的最大因素是往返時間，而不是文件大小。 建立連接以獲取每個文件需要幾次往返。 這也意味着您應該結合使用css和js文件。 在您的高延遲環境中，往返旅行會特別痛苦。 這是谷歌關於往返的建議

正如其他人指出的那樣，內聯＃3表示無法緩存文件。 由於html的大小增加，它可能會減慢加載時間。 但是，您可以避免往返罰款。

在您的環境中，我還建議您查看HTML5應用程序緩存，以優化css和js文件的緩存。 您可能需要將應用程序轉換為使用AJAX調用，而不是加載html頁面，但是這樣做還可以減少所需的數據傳輸。