前端效能最佳化的指標
- 首屏速度，白屏時間等
- 操作速度以及渲染速度等
| 首屏速度 | |||
| 白屏時間 | 渲染頁面 | ||
| 資源載入 | 首屏 js 執行 | 首屏資料請求 | Dom 渲染 |
首屏速度可以做的操作
# 收效很大的操作
1.減少首屏資源體積（打包工具的壓縮，非同步載入，更新為體積更小的新版本，編寫程式碼儘量減少體積，去除大的 base64 體積）最大效果。
- 體積大又不需要馬上用的功能適合非同步載入（比如圖片壓縮功能）。
- 新版本的第三方庫基本支援 tree-haking（很多時候只用到第三方庫的一部分功能）。
- 能不用第三方庫的情形，就儘量自己寫，因為第三方庫通常比自己寫的大。
- 圖片轉為 base64 時會進入 js 程式碼，增加了程式碼量，避免將大圖片轉為 base64。
# 收效不大或者特殊情況的最佳化操作
- 首屏資料儘量並行，如果可行讓小資料介面合併到其他介面。
- 頁面包含大量 Dom 可以分批，隨滾動渲染。
- 骨架屏，loading，先讓螢幕不白，減少使用者焦慮。
操作速度和渲染速度
# 什麼情況下會造成操作卡頓和渲染慢？
- 一次性操作大量 Dom。（解決方案：參照長列表渲染和非同步渲染）
- 進行了複雜度很高的運算（常見於迴圈）。
- vue 和 react 專案中，不必要的渲染太多。
--如果是 react 相關技術棧，可以人工干預的效能最佳化很多。詳情可參照 react 課程。
--vue 中有依賴收集，配合上 vue3 的靜態節點標記，已經基本上避免了因為資料改變引起的無意義渲染。常見的最佳化方式如下：
1.頻繁切換的顯隱的內容用 v-show ，只有開啟就一次決定顯示與否的用 v-if。
2.迴圈，動態切換內容加好 key。
3.keep-alive 快取。
4.區分請求粒度，減少請求範圍，也能減少更新。
資料快取
- 不變的資料，定期時效可以快取在 cookies 或者 localstorage 中，比如 token，使用者名稱等。
- 可以考慮做一個快取佇列，存於記憶體中（全域性物件，vuex）。這樣能保證重新整理就更新資料，也能一定程度上快取資料。