在寫專案的過程中，我們有時候寫出來的**尤其是一些js實現的一些動畫效果，在電腦瀏覽器上執行的是很流暢的，但是在一些手機上執行卻效果不理想，會出現卡頓的效果，這就涉及到執行時的效能問題。按照以前，我是猜想可能出現的問題，然後試圖去優化。如果我們能夠借助乙個分析工具，幫助我們去分析問題，盡快找到問題可能出現的地方，針對性解決優化。
它可以記錄和分析你的應用在執行是否的所有運動。這裡是開始調查運用中可察覺效能問題的最佳位置。
記錄時候的注意點：
移動裝置的cpu一般比台式電腦和筆記本弱得多，當你想分析的頁面的時候，可以使用cpu控制器來模擬移動裝置的cpu
確保screenshots check 選中
選擇4x slowdown來模擬兩倍低配的cpu
點選record，開始錄製
對頁面你想要分析的互動操作
點選stop ,停止錄製，處理資料，顯示效能報告
在這個效能面板所記錄出來的運動包括四個窗格：
controls。 包括開始記錄，停止記錄和配置記錄期間捕獲的資訊。
overview。 頁面效能的高階彙總。包括fps, cpu, net。
火焰圖。 cpu堆疊追蹤的視覺化。
detail。選擇事件之後，此窗格會顯示與改時間有關的更多資訊。
overview窗格包括一下三個圖表
fps。代表每秒的幀數。綠色豎線越高，fps越高。fps圖表上的紅色表示長時間幀，有可能出現卡幀。
cpu。cpu資源。此面積圖指示消耗cpu資源的事件型別。cpu中的各個顏色代表著在這個時間段內，cpu在各種處理上所花費的時間，如果看到某個處理占用大量的時間，那麼這裡就又可以是乙個可以找到效能瓶頸的線索。
net。每一條彩色橫桿代表乙個資源。橫槓越長，檢索資源所需的時間越長。每條橫槓的淺色部分表示等待的時間
在火焰圖中的展開main圖表，devtools展示了了主線程的執行狀況。x軸代表時間。每乙個長條代表乙個evnt。長度越長就代表這個event花費的時間越長。y軸代表了呼叫棧（call stack）。在棧裡，上面的event呼叫下面的event。
你在火焰圖中選擇事件的時候，detail窗格就會顯示與事件相關的其他資訊。
時間線的常見時間屬性
在時間長條的右上角如果出現了紅色小三角，說明這個事件是有問題的，需要特別注意
雙擊這個帶有紅色小三角的事件。在summary面板會看到詳細資訊，注意reveal這個鏈結，雙擊他會讓高亮觸發這個時間的event，點選給出檔案的行數鏈結，就會跳轉到相應**處。
參考文章 （
Performance面板看js載入
前幾天研究了乙個下開發者工具的performance面板，挺有意思的。檔案的載入順序又對頁面效能有著至關重要的影響。所以我用performance面板研究了以下幾種配置的載入順序，把過程和結果記錄下來，供以後開發時參考，相信對其他人也有用。js放在body最後的載入。js放在body前面的載入。as...
開發中Performance的那些事兒
效能 這個詞，不管是在日常生活還是寫程式的時候，都經常被提到。比方說，買新電腦的時候，我們會說 原來的電腦效能跟不上了 寫程式的時候，我們會說，這個程式效能需要優化一下 那麼，你有沒有想過，我們常常掛在嘴邊的 效能 到底指的是什麼呢？我們能不能給效能下乙個明確的定義，然後來進行準確的比較呢？在計算機...
SEAL庫 例6之6 performance解析
chrono high resolution clock time point time start,time end 列印引數 print parameters context cout endl auto parms context first context data parms auto p...