準(zhǔn)備：計劃和度量

• 建立性能優(yōu)化文化
• 比競品快 20%
• 選擇正確的度量標(biāo)準(zhǔn)
  盡快的渲染重要的像素和反饋輸入；優(yōu)先考慮頁面加載，因為它直接被用戶感知；交互反應(yīng)時間、首次輸入延遲、Hero Rendering Times、Largest Contentful Paint、Total Blocking Time and Cumulative Layout Shift 通常比較重要；不包括：First Meaningful Paint.
• 清空后臺并且以用戶角色進行測試
• 與同事共享 checklist

設(shè)置實際的目標(biāo)

• 100 毫秒響應(yīng)時間，60 幀每秒
• LCP < 2.5s, FID < 100ms, CLS < 0.1, Time To Interactive < 5s on 3G
• 控制文件大小 < 170k

定義環(huán)境

• 選擇打包工具

• 漸進的提高用戶體驗

• 選擇一個有力的性能基準(zhǔn)
  js 有昂貴的體驗代價，170kb 的文件已經(jīng)包含關(guān)鍵的 HTML/CSS/Javascript，路由，狀態(tài)管理，工具函數(shù)，框架，業(yè)務(wù)邏輯；徹底檢查網(wǎng)絡(luò)傳輸時間，轉(zhuǎn)義/編譯時間和框架運行時消耗的時間

• 評估每個框架和依賴

• 選擇框架：React, Vue, Angular, Ember and Co.
  確保選擇的框架有服務(wù)端渲染，預(yù)渲染能力。測試服務(wù)端啟動時間和在移動設(shè)備上的客戶端渲染模式；了解框架的核心和機制，了解 PRPL pattern 和 app shell architecture。推薦選擇：Preact，inferno，vue，svelte，Alpine，Polymer

• 優(yōu)化 API 性能
  考慮使用 GraphQL

• 選擇 CDN
  分離靜態(tài)內(nèi)容，放在 CDN ；檢查CDN 的壓縮和轉(zhuǎn)化效率

優(yōu)化打包之后的資源

• 使用 Brotli 壓縮純文本
• 使用響應(yīng)式圖片 AVIF 和 WebP
• 圖片是否被優(yōu)化了？
  使用 mozJPEG 壓縮 JPEG，SVGO 壓縮 SVG，Pingo 壓縮 PNGs；或者使用 Squoosh
• 視頻是否被優(yōu)化了？
• 字體是否被優(yōu)化了？

優(yōu)化構(gòu)建

• 設(shè)置優(yōu)先級
  列一個資源清單（js，images，fonts，第三方腳本，“昂貴”的模塊）并分組；定義基本體驗（需要兼容低版本的瀏覽器），提升體驗（現(xiàn)代瀏覽器豐富的體驗）和擴展（不是必須的資源可以被懶加載）
• 在生產(chǎn)環(huán)境使用 js 原生模塊
  使用 ES 2017 的 type=“module” 屬性，現(xiàn)代瀏覽器可以分模塊加載js
• 加速初始渲染時間
  progressive hydration and import on interaction
• 使用 tree-shaking，scope hoisting 和 code-spliting 減少 請求的資源
  tree-shaking 在打包過程中去掉在生產(chǎn)環(huán)境中沒有使用到的代碼；code-spliting 將代碼分離到不同的塊中，然后可以按需加載；Scope hoisting 檢測導(dǎo)入鏈?zhǔn)欠窨梢员槐馄交⒃诓挥袚p代碼的清空下轉(zhuǎn)化為內(nèi)聯(lián)函數(shù)；使用顆?；拇a塊 chunk 將一些客戶端的渲染移到服務(wù)端；通過追蹤 css/js 代碼塊的使用，找到分割代碼的點
• 是否能將 JavaScript 移到 Web Worker 或者 WebAssembly 中運行？
• 定位和移除沒有用到的 css/JavaScript
• 減小js依賴的大小
  webpack-libs-optimizations 移除在構(gòu)建過程中沒有使用到的方法；Bundlephobia 幫助發(fā)現(xiàn)添加一個包所花費的構(gòu)建時間；size-limit 添加檢查 JavaScript 運行時間；Skypack 發(fā)現(xiàn)社區(qū)挑選的包
• 預(yù)請求 JavaScript 代碼塊
  Guess.js 使用 Google Analytics data 發(fā)現(xiàn)用戶最可能訪問的下一個頁面
• 為目標(biāo) JavaScript 引擎優(yōu)化
  為巨石應(yīng)用使用 script streaming，因此當(dāng)腳本下載時，可以被后臺線程轉(zhuǎn)譯

加載資源優(yōu)化

• 異步加載 JavaScript
  更推薦使用 defer 而不是 async
• 使用 IntersectionObserver 懶加載消耗高的組件
• 延遲渲染和解碼圖片
  content-visible 屬性和 <img decoding=“async”>
• 盡快推送關(guān)鍵的 css
  將關(guān)鍵的 css 放在 head 標(biāo)簽內(nèi)（大小在 14kb 以下）
• Stream responses
• 優(yōu)化渲染性能
  如果需要，可以使用細(xì)粒度的CSS封裝來隔離昂貴的組件。確保在滾動頁面或動畫元素時沒有延遲，并且始終達到每秒60幀。如果這是不可能的，那么讓每秒幀數(shù)保持一致至少比60到15的混合范圍更好。使用CSS will-change通知瀏覽器哪些元素將發(fā)生變化。
• 減少重排合重繪

網(wǎng)絡(luò)合 HTTP/2

分類

• 打包資源優(yōu)化
• 打包速度優(yōu)化
• 瀏覽器下載資源優(yōu)化
• 瀏覽器渲染優(yōu)化