資訊專欄INFORMATION COLUMN
摘要：分析每一秒的幀是用來分析動畫的一個主要性能指標。軸代表了調用棧。在事件長條的右上角出，如果出現了紅色小三角，說明這個事件是存在問題的，需要特別注意。雙擊這個帶有紅色小三角的的事件。
運行時性能表現（runtime performance）指的是當你的頁面在瀏覽器運行時的性能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎么用Chrome DevTools Performance功能去分析運行時性能表現。在RAIL性能評估模型下，你可以在這篇指南中可以學到怎么去用這個performance功能去分析Response, Animation, 以及 Idle 這三個性能指標。
讓我們開始吧在這篇指南中，我們會用Performance工具去分析一個現有的在線DEMO，然后教會你怎么去分析，從而找到性能瓶頸。
打開Chrome的匿名模式。匿名模式可以保證Chrome在一個相對干凈的環境下運行。比如說，你安裝了許多chrome插件，這些插件可能會影響我們分析性能表現。
在匿名模式下打開右邊這個鏈接，DEMO，這個網頁就是我們要用來分析的DEMO。這個頁面里都是很多上下移動的藍色小方塊。
按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 來打開Devtools
模擬移動設備的CPU移動設備的CPU一般比臺式機和筆記本弱很多。當你想分析頁面的時候，可以用CPU控制器（CPU Throttling）來模擬移動端設備CPU。
在DevTools中，點擊 Performance 的 tab。
確保 Screenshots checkbox 被選中
點擊 Capture Settings（??）按鈕，DevTools會展示很多設置，來模擬各種狀況
對于模擬CPU，選擇2x slowdown，于是Devtools就開始模擬兩倍低速CPU
設置DEMO為了使得這個DEMO有相對統一的運行表現（不同的讀者，機器的性能千差萬別）。這個DEMO提供了自定義功能，用來確保這個DEMO的統一表現。
一直點擊 Add 10 這個按鈕直到你能很明顯看到藍色小方塊移動變慢，在性能比較好的機器上，大概要點擊20次左右。
點擊 Optimize按鈕，你會發現藍色小方塊會變的很快而且動畫變得平滑。
點擊 un-optimize 按鈕，藍色小方塊又會變成之前的模樣。
記錄運行時性能表現在之前的DEMO中，當你運行優化模式的時候，藍色小方塊移動地非常快。為什么呢？明明兩個模式都是移動了同樣數量的小方塊而且移動的時間也一樣。那么現在我們在Performance界面下錄制下發生的一切，并且學習如何分析這個記錄，從而找到非優化模式下的性能瓶頸。
在DevTools中，點擊 Record 。這時候Devtools就開始錄制各種性能指標
等待幾分鐘
點擊Stop按鈕，Devtools停止錄制，處理數據，然后顯示性能報告
wow，看起來有非常多的數據，別害怕，我們一個一個來介紹
分析報告一旦你得到了頁面的性能表現報告，那么就可以用它來分析頁面的性能，從而找到性能瓶頸。
分析每一秒的幀FPS（frames per second）是用來分析動畫的一個主要性能指標。能保持在60的FPS的話，那么用戶體驗就是不錯的。
觀察FPS圖表，如果你發現了一個紅色的長條，那么就說明這些幀存在嚴重問題，有可能導致非常差的用戶體驗。一般來說，綠色的長條越高，說明FPS越高，用戶體驗越好。
就在FPS圖表下方，你會看到CPU圖表。在CPU圖表中的各種顏色與Summary面板里的顏色是相互對應的，Summary面板就在Performance面板的下方。CPU圖表中的各種顏色代表著在這個時間段內，CPU在各種處理上所花費的時間。如果你看到了某個處理占用了大量的時間，那么這可能就是一個可以找到性能瓶頸的線索。
把鼠標移動到FPS，CPU或者NET圖表之上，DevToos就會展示這個時間點界面的截圖。左右移動鼠標，可以重發當時的屏幕錄像。這被稱為scrubbing, 他可以用來分析動畫的各個細節。
在Frames圖表中，把鼠標移動到綠色條狀圖上，Devtools會展示這個幀的FPS。每個幀可能都在60以下，都沒有達到60的標準。
當然這個對于DEMO，可以相當容易觀察到性能的問題。但是在現實使用場景下，就不是那么容易觀察到了。所以要把常常使用這些工具來分析頁面。
小功能：顯示實時FPS面板
另外一個好用的小工具就是實時FPS面板，它可以實時展示頁面的FPS指標
按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打開命令菜單
輸入Rendering，點選Show Rendering
在Rendering面板里，激活FPS Meter。FPS實時面板就出現在頁面的右上方。
關閉FPS Meter只要按下Escape就可以了。這篇指南里暫時用不上這個功能。
定位瓶頸現在已經確定到這個頁面的動畫性能表現不太好，那么下一步就是找到為什么
注意Summary面板，你會發現CPU花費了大量的時間在rendering上。因為提高性能就是一門做減法的藝術，你的目標就是減少rendering的時間
展開Main圖表，Devtools展示了主線程運行狀況。X軸代表著時間。每個長條代表著一個event。長條越長就代表這個event花費的時間越長。Y軸代表了調用棧（call stack）。在棧里，上面的event調用了下面的event。
在性能報告中，有很多的數據。可以通過雙擊，拖動等等動作來放大縮小報告范圍，從各種時間段來觀察分析報告。
在事件長條的右上角出，如果出現了紅色小三角，說明這個事件是存在問題的，需要特別注意。
雙擊這個帶有紅色小三角的的事件。在Summary面板會看到詳細信息。注意reveal這個鏈接，雙擊它會讓高亮觸發這個事件的event。如果點擊了app.js:94這個鏈接，就會跳轉到對應的代碼處。
在app.update這個事件的長條下方，有很多被觸發的紫色長條。如果放大這些事件長條，你會看到它們每個都帶有紅色小三角。點擊其中一個紫色事件長條，Devtools在Summary面板里展示了更多關于這個事件的信息。確實，這里有很多reflow的警告。
在summary面板里點擊app.js:70鏈接，Devtools會跳轉到需要優化的代碼處
OK！Devtools里面還有很多很多指標需要你去探索，但是，對于怎么用Devtools去分析網頁的運行時性能表現，你現在已經有了一個基本的概念。
PS：筆者最近開源一款由IBM主導開發設計的叫做Carvue.js的組件庫，歡迎有興趣的朋友一起開發。Carvue.js
譯者博客
原文鏈接
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88986.html
摘要：因此，如果可能，最好利用好毫秒響應預先計算開銷大的工作，這樣網站就更有可能實現的性能。空閑主線程工作分成不大于毫秒的塊。點擊按鈕見圖示，會在頁面運行時捕獲性能指標。 前言 經常能在博客或者論壇上看到很多有關前端性能優化的文章，但是卻很少看到如何分析一個網頁的性能的文章。到底什么樣的指標（或者說是標準）代表這個網頁性能好或者不好，通過什么方式來得到這些指標呢？因此，本文來講述下如何分析一...
摘要：當一個按鈕沒有名字時，屏幕閱讀器會宣布按鈕。雖然每個元素的目的對于有視覺的用戶來說可能是顯而易見的，但對于依靠屏幕閱讀器的用戶來說并非如此。屏幕閱讀器使視覺障礙的用戶能夠通過將文本內容轉換為可以使用的表格如合成語音或盲文來使用您的網站。 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用（移動端）的質量。目前測試項包括頁面性能、PWA、可訪問性（無障礙）、最佳...
摘要：原文地址開始在本教程中，你將學會如何使用性能分析工具分析頁面上的性能瓶頸。其中包含了捕獲性能指標相關的設置。參考分析優化版的性能使用剛剛學習的工作流和工具，單擊演示中的優化以啟用優化的代碼，進行另一次性能記錄，然后分析結果。 原文地址：https://developers.google.com... 開始 在本教程中，你將學會如何使用性能分析工具分析頁面上的性能瓶頸。 在隱身模式下打...
摘要：前端日報精選設計模式掘金優化向單頁應用多路由預渲染指南掘金緩存機制一二三知乎專欄函數式編程在中的應用的學習筆記的學習筆記教程中文可持久化數據結構以及結構分享掘金第期如何準備一次技術面試附一套前端面試題翻譯一些新姿勢個人文章 2017-10-13 前端日報 精選 JavaScript設計模式 - 掘金優化向：單頁應用多路由預渲染指南 - 掘金HTTP 緩存機制一二三 - 知乎專欄函數式編...
閱讀 2121·2023-04-26 02:19
閱讀 1914·2021-11-19 09:40
閱讀 1704·2021-09-29 09:35
閱讀 3575·2021-09-29 09:34
閱讀 4297·2021-09-07 10:16
閱讀 5530·2021-08-11 11:14
閱讀 3578·2019-08-30 15:54
閱讀 1629·2019-08-30 15:53
