大家好，今天又是一個陽光明媚的下午....，想想項目即將完事了，想搗鼓下項目優化方面的事情，剛好發現某個頁面的數據有時候來的慢，有時候來的快。
於是F12一看，我giao！什么情況，馬老師發生甚么事了 ，一個接口請求要 20s ，這好嗎？這當然不好。
於是我們需要查看谷歌瀏覽器的timing：可以分析開頁面請求開始的那一刻到數據請求結束的詳細花費時間。
上圖幾個字段代表的意思：
Queued at ：表示該請求加入到請求隊列中的時刻，請求隊列在打開F12后第一次發送請求的時候創建，直到關閉控制台的時候銷毀。
Started at ：表示請求開始處理的時刻。
Queueing：表示請求從加入到請求隊列中到請求開始處理經過的時間。
Stalled：請求在可以被發送出去之前的等待時間（阻塞時間），一般是等待可復用的TCP連接釋放的時間。瀏覽器對於單個域名只能同時建立4~6個TCP連接（不同瀏覽器實現有差異）。
Proxy Negotiation：瀏覽器和代理服務器連接的協商時間。
DNS Lookup：域名解析花費的時間。
Initial Connection：建立TCP連接花費的的時間，包括TCP握手/重試和協商SSL。
Request sent：發送請求花費的時間。
Waiting (TTFB)：從發出請求到接收到響應第一個字節經過的時間，包括網絡延遲時間。
Content Download：接收響應花費的時間。
可以清楚的看到stalled狀態：請求發出去被阻塞耗時長達20s，原來我的這個頁面還有加載十來張靜態圖片，猜測可能是由於靜態資源請求先觸發，阻塞了xhr請求。
請求被阻塞時候，頁面的文字部分接口還在請求中，導致沒顯示出來，而先顯示了圖片，由於圖片加載慢，導致圖片還在加載，文章文章也被阻塞沒加載出來。頁面效果：
我們看到如下圖請求 慢的這個接口被圖片給阻塞了，只有圖片請求完成才會觸發它正式從本地向后台發起請求，
解決辦法：
1、等文章接口請求完，再渲染圖片組件，注意我們可以這樣做是因為，圖片組件是根據img標簽的src地址去獲取圖片，所以可以通過先后順序來控制請求的先后。即設置一個布爾值控制圖片是否顯示，重要接口請求完時候設置該布爾值為true，顯示圖片組件，此時img就會發起請求去加載圖片。
2、先讓文章接口先請求（還在研究中）