1.1 性能的起因
人無我有，人有我優，人優我廉，人廉我專
1.2 性能的影響
1.2.1 使用者的留存
根據Google營銷平台提供的調研發現，如果網站頁面加載時間超過3，就會有53%的移動網站的通路遭到使用者抛棄。同時她們還針對加載時間分别在5s内和20s内的網站進行比較，發現加載時間在5s内的網站，使用者的停留時間相比會長70%，使用者在一定時間内從該網站離開的跳出率會低35%，而網站上展示廣告的可見率也會高25%。
1.2.1 網站的轉化率
根據Mobify的調研，發現商品的結賬頁面加載時間每減少100ms，基于該商品購買通路的轉化率就會增加1.55%，這個比率對大型電商網站來講，其所帶來的年均收入增長将會使上千萬元。Google營銷平台的調研也指出，加載時間在5s以内的網站會比在20s内的網站的廣告收入多一倍。
1.2.2 體驗與傳播
性能問題引起的所謂使用者體驗差，造成的影響并非單純是使用者覺得不喜歡就放棄了使用。使用者還會拒絕向自己的周邊網絡推薦該網站或應用，更壞的情況是使用者會對低性能進行差評。
1.3 性能評估模型
使用者感覺時間延遲的時間視窗
| 延遲 | 使用者反應 |
|---|---|
| 0~16ms | 人眼可以感覺每秒60幀的動畫轉場，即每幀16ms，除了浏覽器将一幀畫面繪制到螢幕上的時間，網站應用大約需要10ms來生成一幀 |
| 0~100ms | 在該時間視窗内響應使用者操作，才會是流暢的體驗 |
| 100~300ms | 使用者能感覺輕微的延遲 |
| 300~1000ms | 所感覺的延遲會被使用者當作網站頁面加載或更改視圖過程的一部分 |
| >1s | 使用者的注意力将離開之前正在執行的任務 |
| >10s | 使用者感到失望，可能會放棄任務 |
1.3.1 響應
在使用者感覺延遲之前接收到操作的回報。
1.3.2 動畫
要求流暢。總所周知，人眼具有視覺暫留特性，就是當光對視網膜産生的視覺在光停止作用後，仍能保留一段時間。
1.3.3 空閑
為了更加合理地利用浏覽器的空閑時間，最好将處理任務按50ms為機關分組。這麼做就是保證使用者在發生操作後的100ms内給出響應。
1.3.4 加載
使用者感覺要求我們盡量在1s内完成頁面加載，如果沒有完成，使用者的注意力就會分散到其他事情上，并對目前處理的任務産生中斷感。從使用者感覺體驗的角度來說隻要關鍵渲染路徑完成，使用者就會認為全部加載已完成。對于其他非關鍵資源的加載，延遲到浏覽器空閑時段再進行，是比較常見的漸進式優化政策。
1.4 性能優化的步驟
1.4.1 性能測量
幾個小工具：
1.Chrome浏覽器的Performance功能
2.Lighthouse(開源的自動化審查網站頁面性能的工具)
1.4.2 生命周期
1.4.3 優化方案
傳輸資源地優化，比如圖像資源，不同地格式類型會有不同的使用場景，在使用的過程中是否恰當。
加載過程地優化，比如延遲加載，是否有不需要在首屏展示的非關鍵資訊，占用了頁面加載的時間。
Javascript是現代大型網站中相當“昂貴”的資源，是否進行了壓縮，書寫是否規範，有無考慮記憶體洩漏等。
關鍵渲染路徑優化，比如是否存在不必要的重繪和回流。
本地存儲和浏覽器緩存。
1.5 小結
從使用者的角度出發，本着使用者的需求和體驗為中心的原則，探讨具體的優化政策。
明确問題所在之後有目标地進行優化。
前端性能優化系列：
前端性能優化：1.什麼是前端性能優化
前端性能優化：2.前端頁面的生命周期
前端性能優化：3.圖像資源優化
前端性能優化：4.資源加載優化
前端性能優化：5.高性能的JavaScript代碼
前端性能優化：6.項目建構優化
前端性能優化：7.頁面渲染優化