載入速度慢。
資源：首屏慢、併發請求過多、首屏介面慢、摺疊介面執行慢、摺疊渲染對應的摺疊執行慢、靜態資源摺疊載入、執行過程慢。
介面慢，長任務太多，阻塞JS，執行記憶體洩漏，重繪重排太多，關鍵節點不限流穩定通過建立效能監控指標：通過真實的使用者資料反饋判斷使用者是否卡住，包括網路監控和執行時效能監控。
chrome devtools: network主要排除網路問題。
chrome devtools: performance它主要檢查效能執行時效能，包括長任務、渲染時間、重排和重繪、執行時間線和阻塞場景。
chrome devtools: performance monitor監視使用者執行時效能，以檢視是否存在任何記憶體洩漏。
react developer tools：它可用於跟蹤 React 應用程式效能、渲染數量、重排和重繪。
lighthouse：全面分析網頁效能並支援瀏覽器外掛程式的工具。
webpack-bundle-analyzer：執行產品依賴關係分析和包裝尺寸分析。
獲取資料包：通過抓包，檢視線上請求分析、請求模擬、網路劫持，只檢視JS執行時間。
E2E測試：通過e2e進行效能預檢，每次上線前進行一系列系統操作，檢視耗時多少，上線需要多長時間。
首屏載入慢方向
資源載入方向。
用tree shaking減小包大小**壓縮和混淆對於較老的瀏覽器，直接使用 ES6 語法，對於較低的瀏覽器使用 ES5（ES6 語法的數量會比編譯到 ES5 少很多，執行速度也更快）。split chunks拆分大資料包並重用小資料包gzip使用**壓縮：使用 Sprite 圖示使用iconfont延遲載入載入，僅載入首屏使用的必要資源tailwindcss等技術，重用 CSS 使用微前端從技術上講，第一屏只載入當前子應用頁面，整個網站只能載入一小部分**第一屏不一定在載入元件微前端渲染方向之前，盡量依賴FMP或TTI來載入。
儘量減少重排、重繪，減少重複渲染（usememo、usecallback、memo 等），減少 setstate 的數量（可以將多個 setstate 合併為乙個），最小化 dom 節點的深度網路定向。
使用流式伺服器端渲染，您可以檢視文件：使用伺服器端渲染，減少首屏請求，使用 SSG 靜態站點生成首屏必要資料，不發出客戶端請求，使用後端模板注入，使用 BFF 進行請求聚合，使用 CDN 進行網路請求分發，DNS 預取資源預載入（在業餘時間載入後續頁面所需的資源和介面， 例如，link rel preload），在業務邏輯上啟用 HTTP2 多路復用，提前使用首屏所需的介面（例如，在載入 HTML 的那一刻，使用乙個非常小的 JS 檔案傳送第乙個螢幕所需的請求，然後快取它們，然後在業務使用它們時直接使用它們） 使用快取技術快取資源和請求： 強快取、協商快取、離線快取、Service Worker 快取和後端業務快取執行時的滯後方向
檢查是否有long tasks、計畫拆除long tasks解決專案中的複雜度問題：檢查專案是否存在記憶體洩漏，檢查特定業務流程的介面是否慢，將高度複雜的計算邏輯放入 Service Worker 中進行處理。