登錄頁面的頁面加載時間本身是761ms。當我檢查時,CSS文件的等待時間很長。我能做些什麼來縮短等待時間? 服務器上CSS文件的高等待時間。如何減少它?
0
A
回答
0
您將從此得到一個想法[Facebook的管道a.k.a BigPipe]
CLIENT
- 瀏覽器發送一個HTTP請求到Web服務器。
- Web服務器解析請求,從存儲層中提取數據,然後 制定一個HTML文檔並通過HTTP 響應發送給客戶端。
- HTTP響應通過Internet傳輸到瀏覽器。
- 瀏覽器解析來自Web服務器的響應,構造DOM樹 表示HTML文檔,並下載CSS和文檔引用的JavaScript資源。
- 下載CSS資源後,瀏覽器解析它們並將它們應用到DOM樹。
- 下載JavaScript資源後,瀏覽器解析並執行它們。
SERVER
- 請求解析:Web服務器解析並健全檢查HTTP 請求。
- 數據獲取:Web服務器從存儲層獲取數據。
- 標記生成:Web服務器爲 響應生成HTML標記。
- 網絡傳輸:將響應從網絡服務器傳輸到 瀏覽器。
- CSS下載:瀏覽器下載頁面所需的CSS。
- DOM樹構造和CSS樣式:瀏覽器構造DOM樹 的文檔,然後在其上應用CSS規則。
- JavaScript下載:瀏覽器下載頁面引用的JavaScript資源 。
- JavaScript執行:瀏覽器執行頁面的JavaScript代碼。
這是他們爲提高速度而實施的Facebook管道背後的想法。
在短期
- 頁面拆分到多個div的
- 負載的基本佈局和加載JavaScript文件。
- 在該JavaScript文件中,添加所需的JS和CSS文件名,然後使用DOM或使用XHR動態添加它,將響應文本添加到主頁面。
- 通過使用這個,基本頁面將被加載,並在1或2秒(如果它是一個更快的連接),實際的頁面將被加載。
你可以閱讀更多關於Facebook管道Here
+0
可以嘗試做到這一點。但在登錄頁面上幾乎沒有可以拆分的組件。該頁面本身需要很長的加載時間 –
+0
如果您想要 –
+0
,那麼您也可以將其拆分,其中只有一個登錄表單。沒有其他組件。 –
包括頁面或頭底部的CSS? –
@PraveenPuglia css在頭 –
認爲最初的標記交付是第一個0.2秒。正確的時候收到文件,所有的css請求都被解僱了,這對我來說似乎是正確的。這可能是您需要減少的標記交付時間。 CSS做得很好。 –