2017-02-24 90 views
0

登錄頁面的頁面加載時間本身是761ms。當我檢查時,CSS文件的等待時間很長。我能做些什麼來縮短等待時間? enter image description here服務器上CSS文件的高等待時間。如何減少它?

+0

包括頁面或頭底部的CSS? –

+0

@PraveenPuglia css在頭 –

+0

認爲最初的標記交付是第一個0.2秒。正確的時候收到文件,所有的css請求都被解僱了,這對我來說似乎是正確的。這可能是您需要減少的標記交付時間。 CSS做得很好。 –

回答

0

您將從此得到一個想法[Facebook的管道a.k.a BigPipe]

CLIENT

  1. 瀏覽器發送一個HTTP請求到Web服務器。
  2. Web服務器解析請求,從存儲層中提取數據,然後 制定一個HTML文檔並通過HTTP 響應發送給客戶端。
  3. HTTP響應通過Internet傳輸到瀏覽器。
  4. 瀏覽器解析來自Web服務器的響應,構造DOM樹 表示HTML文檔,並下載CSS和文檔引用的JavaScript資源。
  5. 下載CSS資源後,瀏覽器解析它們並將它們應用到DOM樹。
  6. 下載JavaScript資源後,瀏覽器解析並執行它們。

SERVER

  1. 請求解析:Web服務器解析並健全檢查HTTP 請求。
  2. 數據獲取:Web服務器從存儲層獲取數據。
  3. 標記生成:Web服務器爲 響應生成HTML標記。
  4. 網絡傳輸:將響應從網絡服務器傳輸到 瀏覽器。
  5. CSS下載:瀏覽器下載頁面所需的CSS。
  6. DOM樹構造和CSS樣式:瀏覽器構造DOM樹 的文檔,然後在其上應用CSS規則。
  7. JavaScript下載:瀏覽器下載頁面引用的JavaScript資源 。
  8. JavaScript執行:瀏覽器執行頁面的JavaScript代碼。

這是他們爲提高速度而實施的Facebook管道背後的想法。

在短期

  • 頁面拆分到多個div的
  • 負載的基本佈局和加載JavaScript文件。
  • 在該JavaScript文件中,添加所需的JS和CSS文件名,然後使用DOM或使用XHR動態添加它,將響應文本添加到主頁面。
  • 通過使用這個,基本頁面將被加載,並在1或2秒(如果它是一個更快的連接),實際的頁面將被加載。

你可以閱讀更多關於Facebook管道Here

+0

可以嘗試做到這一點。但在登錄頁面上幾乎沒有可以拆分的組件。該頁面本身需要很長的加載時間 –

+0

如果您想要 –

+0

,那麼您也可以將其拆分,其中只有一個登錄表單。沒有其他組件。 –