網絡請求問題解決指南

本文翻譯自Network Issues Guide

因爲我的水平有限，翻譯中不免有紕漏和不足，望不吝指正。討論地址

參見起步瞭解更多關於Chrome Devtool中網絡面板的基礎知識。

隊列中或停滯的請求

症狀

Chrome瀏覽器支持6個請求的並行下載，後面的請求將會推入請求隊列中或者停滯不前。一旦前面的六個請求之一完成，隊列中的一個請求將會啓動。

Figure 1. 一個網絡面板中關於隊列或停滯請求的例子。在上圖的瀑布圖中，你能夠看到6個並行的logo-1024px.png的xhr請求。然後面的圖片請求將中止不前直到上面某一個請求完成。

緣由

同一域名下太多請求發出。在HTTP/1.0或者HTTP/1.1鏈接下，Chrome對於同一主機支持最多同時6個TCP連接。

解決方案

• 若是必定要用HTTP/1.0或者HTTP/1.1，能夠經過域名分片來解決上述問題。
• 使用HTTP/2，在HTTP/2協議下不用對域名進行分片。
• 移除或者延遲沒必要要的請求來使得一些關鍵性請求可以更早下載。

Slow Time To First Byte (TTFB)

症狀

請求花費很長時間來接受到服務器傳來的第一個字節。

Figure 2. 上面是一個關於花費長時間從服務器獲取到第一個字節的例子。在瀑布圖中長長的綠色橫柱表示了請求等待了很長時間。

緣由

• 客戶端和服務器之間的連接慢。
• 服務器反應遲緩，在本地啓動服務，若是你依然有一個很慢的TTFB，那說明服務器連接或者服務器自己反應很慢。

解決方案

• 若是是鏈接緩慢，考慮將你的內容放到CDN上面或者更換服務器提供商。
• 若是是服務反應慢，考慮優化數據庫請求、實施緩存或者更改服務器配置。

下載緩慢

症狀

請求中的下載階段花費很長時間

Figure 3. 上圖是一個請求下載花費長時間的例子，在上面的瀑布圖中elements-panel.png旁的的一條長長的藍色橫柱表示了花費了很長時間來下載該圖片。

緣由

• 客戶端和服務器連接緩慢
• 下載內容過大。

解決方案

• 考慮將你的內容經過CDN來提供，或者更換服務器提供商。
• 優化請求、減小下載內容體積。