1.打開速度怎么變快 - 首屏加載優化
2.再次打開速度怎么變快 - 緩存優化了
3.操作怎么才順滑 - 渲染優化
4.動畫怎么保證流暢 - 長任務拆分
2.1 首屏加載指標細化:
1.FP(First Paint 首次繪制)
2.FCP(First contentful Paint 首次內容繪制)，FP 到 FCP 中間其實主要是 SPA 應用JS執行，太慢就會白屏時間太長
3.FMP(Frist Meaningful Paint 首次有效繪制)，主要內容呈現的時間
4.LCP(Largest Contentful Paint 最大內容渲染)，加載最大內容塊呈現時間
5.INP(Interaction to Next Paint)?與下一幀繪制的交互
6.TTI 可交互時間，SSR
7.TBT(Total Blocking Time 阻塞時間從 FCP 到 TTI):總阻塞時間
8.CLS(Cumulative Layout Shift 布局偏移):布局偏移情況，重排 reflow
9.TTFB(Time to First Byte):首字節到達時間，請求發出后到接收到數據中間的時間
2.2 方案：
1.優化圖片，Webp，圖片壓縮，圖片尺寸(在合適的容器內用合適的尺寸圖片 1倍2倍3倍圖)；
2.字體瘦身，設計型產品，字體子集化(用了哪些字，就最后只生成對應字的字體文件)，Fontmin；
3.懶加載資源，圖片懶加載、JS?異步加載；
4.css、JavaScript 文件壓縮，打包構建階段完成(terser)
- 代碼壓縮
- 文件合并
- 文件拆分
- Tree shaking
- 動態加載
5. Gzip、Brotli
6.SSR、SSG
3.1 動畫卡頓：?
為什么會卡頓？單線程 阻塞?
3.2 方案：??
1.減少主線程阻塞
優化 JavaScript 執行，較少長任務(復雜的計算【web worker、將任務切分(react ScheduLer)】)?
2.GPU
- css 屬性(transform、opacity)
- 避免會引起重排的屬性(定位 left、top)
3.requestAnimationFrame；
4.節流防抖?
?
4.1 應用層狀態優化:
1.減少全局狀態的依賴
- 將狀態盡可能局部化，避免使用全局狀態(Redux或Context)管理所有數據。
- 如示例:對于僅用于某些組件的狀態，可以使用組件的 useState 或useReducer。
2.優化 Context 的性能
- Context 的更新會重新渲染所有訂閱的組件
- 解決方案:拆分:Context，將不同的邏輯存儲在多個 Context 中，降低重新渲染范圍。
3.使用高效的狀態管理庫
- 使用輕量、高性能的狀態管理工具，如Zustand、Jotai 或 Recoil，它們具備更細粒度的狀態更新機制。
4.避免不必要的狀態更新?
?
?
)
