前段時間接手了一個 web 前端性能優化的任務，一時間不知道從什么地方入手，查了不少資料，發現其實還是蠻簡單的，簡單來說說。
一.前端性能測試是什么?
前端性能測試對象主要包括：
HTML、CSS、JS、AJAX 等前端技術開發的 Web 頁面
影響用戶瀏覽網頁速度的因素主要有：
服務端數據返回、網絡傳輸、頁面渲染等
前端性能測試目的：
計算出包含頁面渲染、網絡傳輸以及服務器端解析等綜合因素在內的加載時間指標，對該頁面性能進行評估分析，找出影響性能的主要因素和瓶頸，並在此基礎上，給出一定的優化建議和解決方案，從而提升用戶體驗
前端性能優化主要工具：
頁面結構分析工具： YSlow/PageSpeed
通過網頁 JS/CSS/Image 數及請求數量、請求類型、緩存等方面的靜態分析 ，多用於本地開發或者本地測試
真實用戶瀏覽頁面分析：OneAPM Browser Insight
通過真實瀏覽器訪問頁面，收集頁面的 w3c 標准信息，ajax，網絡等數據等終端分析，多用於內網多終端系統檢測和 web 網站檢測
二.靜態分析——Yslow（業界俗稱：雅虎評估網站性能的23條軍規）
通過給瀏覽器安裝 Yslow 插件並開啟后，在控制面板里就會給你評分提示，和改進建議。
YSlow 的 Grade (等級視圖)
Yslow 給出的網站性能評分是從 F~A，A 最優、F 最差，通過上圖的測試博客來看，網站有 4 處得分最低，例如上圖中的最低分提示：我博客的 HTTP 請求太多。其中應用了 14 個外部 js、3 個 CSS 文件（之前我已從 6 個合並為 3 個）、14個 CSS 背景圖片。
Yslow 的建議是讓我合並這些，至於合並 CSS 引用圖片我在“提高網站打開速度的7大秘籍”中介紹過。
Yslow Components（組件視圖）
可以通過 Components 考驗查看網頁各個元素占用的空間大小。例如我博客某個頁面，有 236 個 images（圖片），占用了 489.2 K，通過詳細查看，發現來自 gravatar 頭像的引用圖片非常大，再加上博客本身評論量就大，每個頭像就占用幾 K，幾百個就占用了整個網頁 50% 的大小，而且圖片還是引用的，加載就更慢。
所以，得出的結論是：gravatar 雖然增強了互動性和個性，但也結結實實影響了網站速度。
Yslow Statistics（統計信息視圖）
上圖左側圖表顯示的是頁面元素在空緩存中的加載情況，右側為頁面元素使用緩存后的頁面加載情況。從圖中可以直觀的看出（尤其是我標的紅框），這個網頁有 263 個 HTTP 請求，網頁的大小達到 773.9K ，意味着每打開一個頁面幾乎需要下載 1M 的東西，而通過使用緩存后我們可以看到效果圖片基本靠緩存，而網頁總大小壓縮到 43.2K 。
Statistics 這個統計信息視圖工具和 Components （第三選項卡）一樣，只是效果更直觀，如果要獲得性能優化建議還是要看 Grade （第二選項卡）的詳細建議。
三.終端分析：OneAPM Browser Insight/業界俗稱—real user monitoring
通過各種語言探針給頁面自動插入 js 代碼，在瀏覽器瀏覽的時候收集頁面加載時間和網絡信息，多用於內網多終端系統檢測和 web 網站.
主要性能指標:白屏時間、首屏時間、資源加載完成時間、網頁加載完成時間 
OneAPM 的 Browser Insight 做的不是簡單的把 window.performance 的數據采集過來然后報上去，它們從網頁打開的整個過程區分了四個響應時間，具體的划分標准每個頁面都有標注。為了避免某一次訪問的特殊情況拖慢了整個平均時間，用戶還可以結合下面的定位分析功能一起來看。
從整體趨勢查看頁面性能——定位分析
其實大多數互聯網公司之所以優化前端網頁，關心的是大多數打開自己的網頁是否流暢，一兩個個例並不在他的考慮范圍之內或者說並不是當務之急。
定位分析功能實現了按響應時間把用戶體驗進行分區，包括 Apdex 指數分區和 W3C 頁面加載時間標准分區，通過分區可以清晰的定位用戶體驗群體，根據不同的群體查看應用性能區間，包括網絡、服務器請求排隊、Web 應用處理耗時、網頁構建耗時、資源加載耗時，同時可以多維度的查看用戶體驗區間的影響范圍
慢加載追蹤—瀑布流圖
頁面加載緩慢大家都能感覺出來，可是，是服務器的原因？是網絡的原因？是頁面資源加載的原因？是哪個圖片加載的慢？這些問題 OneAPM 的慢加載追蹤解決的都比較好。上幾張干貨圖！
必須得說這個做的真心棒!界面做的很漂亮，還很詳細，安卓 4.3 版本以上的微信瀏覽器也都能監控！
好了今天就簡單說這些，之后有機會我們再聊~拜拜了各位~