1、fp，first paint。
2、fcp，first content paint。
3、fmp，first meaning paint。
4、atf，above the fold，首屏時間
5、tti，time to interact，首次互動時間，可以用domready時間。
（1）dom載入完時間，domcontentloaded。
7、服務端重要介面載入速度。
8、客戶端啟動容器（webview）時間。
前端效能優化分為兩個方向，一是工程化方向，另乙個是細節方向。這個概念來自於知乎lucas hc。
工程化方向
1、客戶端gzip離線包，伺服器資源gzip壓縮。
2、js**，tree shaking，es module，動態import，動態polyfill。
3、載入優化，webp，考慮相容性，可以提前載入一張，嗅探是否支援webp。
4、延遲載入不用長內容。通過打點，看某些彈窗內或者子內容是否要初始化載入。
6、服務端渲染，客戶端預渲染。
7、cdn靜態資源
8、webpack dll，通用優先打包抽離，利用瀏覽器快取。
9、骨架圖
10、資料預取，包括介面資料，和載入詳情頁。
11、webpack本身提供的優化，base64，資源壓縮，tree shaking，拆包chunk。
12、減少重定向。
細節方向
1、，佔位，懶載入。 雪碧圖
2、使用 prefetch / preload 預載入等新特性
3、伺服器合理設定快取策略
4、async（載入完當前js立即執行）/defer(所有資源載入完之後執行js)
5、減少dom的操作，減少重排重繪
6、從客戶端層面，首屏減少和客戶端互動，合併介面請求。
7、資料快取。
8、首頁不載入不可視元件。
9、防止渲染抖動，控制時序。
10、減少元件層級。
11、優先使用flex布局。
1、css動畫效率比js高，css可以用gpu加速，3d加速。如果非要用js動畫，可以用requestanimationframe。
2、批量進行dom操作，固定容器大小，避免螢幕抖動。
3、減少重繪重排。
4、節流和防抖。
5、減少臨時大物件產生，利用物件快取，主要是減少記憶體碎片。
6、非同步操作，intersectionobserver，postmessage，requestidlecallback。
1、performance。performance.now()與new date()區別，它是高精度的，且是相對時間，相對於頁面載入的那一刻。但是不一定適合單頁面場景。
2、window.addeventlistener("load", ""); window.addeventlistener("domcontentloaded", "");
3、img的onload事件，監聽首屏內的是否載入完成，判斷首屏事件。
4、requestframeanmation 和 requestidlecallback。
5、intersectionobserver、mutationobserver，postmessage。
6、web worker，耗時任務放在裡面執行。
1、chrome dev tools
2、page speed
3、jspref
前端效能優化總結
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...
前端效能優化總結
效能是前端開發乙個非常重要的組成部分，與應用不同，網頁的所有資源初始都需要通過網路傳輸，因此如何進行更好地進行網路傳輸對前端效能影響很大，此外還有瀏覽器渲染部分的優化。不管怎麼說如何進行前端效能優化是乙個永恆的話題。本文是閱讀小冊前端效能優化原理與實踐後加上部分自己以前的理解整理而成的，更詳細的原理...
前端效能優化總結
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...