1、WebPageTest
http://www.webpagetest.org/
可以看到Web程序是否使用Keepalive、是否壓縮、是否使用CDN、是否啟用緩存等信息
可以穿透進去看對應信息。
可以看到加載時間等概要信息。
可以看到優化清單
2、友雲音
http://ycm.yonyou.com/
可以看到慢Ajax、慢頁面數等。
也可以看到PV和頁面加載時間等。
3、page speed
谷歌插件現在已經停止服務。
4、Timeline工具
Timeline面板
打開chrome開發者工具，切換到Timeline選項卡，界面如下：
功能很多，非常複雜是不是，對應E問不好的同學，真的是無從下手，幸好有翻譯工具，下面我們一步一步的揭開這個工具的神秘面紗。
強烈建議在瀏覽器隱身模式下使用這個工具，並且禁用一切無關的插件，因為這些插件會影響測試的結果。
工具默認是不開啟記錄的，如果要分析頁面，請點擊圓形的記錄按鈕，按鈕變紅後就可以開始記錄頁面的各個事件了，這個時候可以在頁面上做各種操作，Timeline工具會詳細的記錄下各類事件。建議不要記錄太久，太多會增加分析的難度。
顏色的屬性
Timeline工具裡面使用是4種顏色來表示不同類別的事件：
藍色：加載；
黃色：腳本；
紫色：渲染；
綠色：繪製
過濾
過濾面板可以對不同類型的事件和花費時間進行過濾，非常好用：
事件模式
在這個模式中，Summary視圖(在Timeline的頂部)顯示了一些水平的柵欄，分別代表頁面中的網絡和HTML解析(藍色)，JavaScript(黃色)，渲染(紫色)以及繪製(綠色)事件。重繪是瀏覽器事件，是為響應諸如窗口大小改變或者滾動之類的視覺變化而調用的。
我們可以在最上面灰色的時間節點哪裡拖動來選擇查看的記錄範圍，如下圖：
在DETAILS面板中可以查看該記錄範圍內各類型事件的時間開銷：
other表示其它事件花費的時間，Idle表示空閒時間 ，也可以在DETAILS面板中查看單個記錄的時間開銷，如下：
5、Netwoek工具
可以看到頁面大小、請求數和加載時間以及從網站開始到結束的總時間
閱讀更多 調音哥 的文章
