使用Chrome DevTools的Performance面板和代碼中window.performance分析頁面的性能。
Chrome DevTools的Performance
1. 無痕模式
無痕模式可以保證Chrome在一個相對干凈的環境下運行。比如安裝了許多Chrome插件，這些插件可能影響我們分析性能的數據。
使用快捷鍵Control+Shift+N可以打開無痕模式。
2. 打開瀏覽器開發模式，Mac下使用Command+Option+I或者Windows使用Control+shift+I；
3. 點擊DEMO來幫我我們分析。調到手機模式下
頁面按鈕功能：Add 10-增加10個移動的點、 Subtract 10-減少10個點（到10個就不能在減少了）、 stop-停止運行、 Optimize-優化模式、Help-跳轉幫助頁。
4. 設置網絡和CPU，可以設置Network設置網絡信號類型，設置CPU可以模擬移動端性能。（速度越慢約能清楚的看到需要優化的點）。
5. 開始測試
1. 點擊add 10大約20次，可以看到點運動已經明顯卡頓。
點擊開始性能檢測收集，出現收集性能彈窗。
點擊stop完成性能收集
2. 顏色塊的表示：
（1）藍色為HTML文件
（2）黃色為腳本
（3）紫色為樣式
（4）綠色為媒體文件
（5）灰色為其他資源
3. OverView三個圖標
（1）FPS，每秒幀數，綠色豎線越高，FPS越高。FPS圖表上的紅色塊表示長時間幀，很可能出現卡頓。當幀數超過60就會出現卡頓的現象。
（2）CPU，CPU資源，其面積代表消耗CPU資源的事件。
（3）NET，每條彩色橫杠代表一種資源，橫杠越長需要時間越長，每個橫杠淺色部分代表等待時間。
可以放大顯示一部分記錄，以便簡化分析。
選中一部分后，可以使用w、s、a、d代表放大、縮小、前進、后退。
4. 火焰圖表示
火焰圖是CPU處理事件消耗的時間，由此可以找到瓶頸的大概方向。
5. 存在問題報告
在幀率卡頓的情況下，可以看到主進程的問題（事件長條出現紅色小三角），這說明事件存在問題，需要特別注意。
雙擊這個紅色小三角，在Summary面板會看到詳細信息，點擊app.js71就會調轉到對應的代碼處。
6. 顯示實時FPS面板
（１）Mac下使用Command+Shift+P或者Windows下使用Control+Shift+P打開命令菜單。
（２）輸入Rendering，選擇Show Rendering。
（３ 在Rendering面板里，激活FPS Meter。FPS實時面板就出現在頁面的右上角。
這樣就可以實時觀測觀測一些性能信息了。
window.performance
performance是W3C基於前端對性能的需求下推出的一套性能API標准。
timing（performance.timing）
用戶輸入URL到用戶使用頁面全過程時間統計，會返回一個PerformanceTiming對象，單位為毫秒
1. 幾個關鍵的點：
（１）fetchStart：發起獲取當前文檔的時間，我理解是瀏覽器收到頁面發起請求的時間點。
（２）domainLookupStart：返回瀏覽器開始DNS查詢的時間，如果此請求沒有DNS查詢過程，如長連接，資源Cache，或是本地資源，那么就返回fetchStart的值。
（3）domainLookupEnd: 返回瀏覽器結束DNS查詢的時間，如果沒有DNS查詢同上。
（4）ConnectStart： 瀏覽器向服務器請求文檔，開始建立連接的時間，如果此連接是一個長連接或者無需和服務器連接（使用緩存），則返回domainLookupEnd的值。
（5）ConnectEnd：瀏覽器向服務器請求文檔，建立連接成功的時間。
（6）requestStart：開始請求文檔時間（注意沒有requestEnd）
（7）responseStart：瀏覽器開始接收第一個字節的時間，數據來自於服務器，緩存或本地。
（8）unloadEventStart：卸載一個文檔開始的時間。
（9）unloadEventEnd：卸載一個文檔結束的時間。
（10）domLoading：瀏覽器把domcument.readyState設置為“loading”的時間點，開始構建DOM書的時間點。
（11）responseEnd：瀏覽器接收最后一個字節數據的時間，連接被關閉的時間。
（12）domInterActive：瀏覽器把domcument.readyState設置為“interactive”的時間點，DOM樹創建結束。
（13）domContentLoadedEventStart：文檔發生DomContentLoaded的事件時間。
（14）domContentLoadedEventEnd：文檔的DOMContentLoaded事件結束的時間。
（15）domComplete：瀏覽器把document.readyState設置為“complate”的時間點。
（16）loadEventStart：文檔觸發load事件的時間。
（17）loadEventEnd：文檔觸發load事件結束后的時間。
2. 常用的一些值
（1）准備新頁面耗時：fetchStart-navigationStart
（2）重定向時間：redirectEnd-redirctStart
（3）App Cache時間：domainLookupStart-fetchStart
（4）DNS解析時間：domainLookupEnd-domainLookupStart
（5）TCP連接時間：connectEnd-connectStart
（6）request時間：responseEnd-requestStart 請求開始到響應結束
（7）請求完畢到DOM樹加載：domInterActive-responseEnd
（8）構建與解析DOM樹，加載資源時間：domComplete-domInteractive
（9）load時間：loadEventEnd-loadEventStart
（10）整個頁面的加載時間：loadEventEnd-NavigationStart
（11）白屏時間：responseStart-navigationStart
performance.getEnteres()
這個API能幫我們獲得資源的請求時間，報錯JS、CSS、圖片等
包含的信息：
（1）entryType：類型為resource
（2）name：資源的url
（3）initiatorType：資源的link
（4）資源時間 :duration的值，是responseEnd-startTime
performance.memory
這個API主要是瀏覽器內存情況
包含的信息：
（1）jsHeapSizeLomit：內存大小限制
（2）totalJSHeadSize：可使用的內容
（3）userdJSHeadSize：已使用的內容