（譯）2019年前端性能優化清單 — 上篇
https://juejin.im/post/5c46cbaee51d453f45612a2c
（譯）2019年前端性能優化清單 — 中篇
https://juejin.im/post/5c471eaff265da616d547c8c
（譯）2019年前端性能優化清單 — 下篇
https://juejin.im/post/5c473cdae51d45518d4701ff
準備：計畫和度量
1. 建立性能優化意識
2. 目標：要比你最快的競爭對手快至少 20%
3. 選擇正確的指標
4. 從具有代表性的使用者使用的設備收集資料
5. 設置乾淨的使用者設定檔以進行測試
6. 與團隊成員分享性能清單
制定現實的目標
7. 回應時間控制在 100ms，幀速控制在 60幀/秒
8. 速度指標（SpeedIndex） < 1250，3G上的交互時間（Interaction time）小於5s，關鍵檔大小預算 < 170 Kb（gzip）
定義環境
9. 根據實際情況選擇並搭建構建工具
10. 預設情況下使用漸進增強
11. 選擇強大的性能基準
12. 評估每個框架和依賴項
13. 考慮使用 PRPL 模式和 app shell 架構
14. 優化 API 的性能
15. 您是使用 AMP 還是 Instant Articles
16. 合理使用 CDN
資源優化
17. 使用 Brotli 或 Zopfli 進行純文字壓縮
18. 使用回應式圖像和 WebP
19. 圖像是否已恰當優化
20. 視頻是否已恰當優化
21. Web 字體是否已恰當優化
構建優化
22. 分清輕重緩急
23. 考慮使用 cutting-the-mustard 技術
24. 解析 JavaScript 是昂貴的，所以保持小
25. 使用無用代碼移除（Tree-shaking） ，作用域提升（Scope hoisting）和代碼分割（Code-splitting）來減少有效負載
26. 能否將 JavaScript 卸載到 Web Worker 中
27. 能否將 JavaScript 卸載到 WebAssembl 中
28. 您使用的是預編譯器嗎
29. 僅將遺留代碼提供給傳統流覽器
30. 您是否在 JavaScript 中使用差異化服務
31. 通過增量解耦識別和重寫遺留代碼
32. 識別並刪除未使用的 CSS / JavaScript
33. 修剪 JavaScript 依賴項的大小
34. 您是否正在使用 JavaScript 塊的預測預取
35. 利用針對目標 JavaScript 引擎的優化
36. 用戶端渲染還是伺服器端渲染
37. 限制協力廠商腳本的影響
38. 正確設置 HTTP 緩存頭
交付優化
39. 非同步載入 JavaScript
40. 使用 IntersectionObserver 延遲載入昂貴的元件
41. 逐步載入圖像
42. 快速推送關鍵 CSS
43. 嘗試重新組合 CSS 規則
44. 流回應
45. 考慮使元件連接/設備記憶體感知
46. 考慮使您的元件設備具有記憶體感知能力
47. 預熱連接以加快傳送速率
48. 使用 Service workers 進行緩存和網路回退
49. 您是否使用 CDN / Edge 上的 Service workers（例如，進行A / B測試）
50. 您是否優化了渲染性能
51. 您是否優化了渲染體驗
HTTP/2
52. 遷移到HTTPS，然後打開HTTP / 2
53. 正確部署HTTP / 2
54. 您的伺服器和 CDN 是否支援 HTTP / 2
55. 是否啟用了 OCSP stapling
56. 是否採用 IPv6
57. 是否正在使用 HPACK 壓縮
測試和監測
58. 確保伺服器上的安全性是防攻擊的
59. 您是否優化了審計和調試工作流程
60. 您是否在代理流覽器和傳統流覽器中測試過
61. 您是否測試了協助工具
62. 您是否建立了連續監控
速效方案
1.測量實際環境的體驗並設定適當的目標。一個好的目標是：第一次有意義的繪製 < 1 s，速度指數（Speed Index） < 1250，在慢速的 3G 網路上的交互 < 5s，對於重複訪問，TTI < 2s。優化渲染開始時間和交互時間。
2.為主範本準備關鍵CSS，並將其包含在 <head> 頁面中。（您的預算為14 KB）。對於CSS / JS，檔大小不超過 170KB gzipped（0.7MB解壓縮）。。
3.盡可能多地減少代碼量，優化，推遲和延遲載入腳本，檢查羽量級備選方案並限制協力廠商腳本的影響。
4.僅將遺留代碼提供給舊版流覽器 <script type="module">。
5.嘗試重新組合CSS規則並測試體內 CSS。
6.添加資源提示以加快交付速度，使用 dns-lookup，preconnect，prefetch 和 preload。
7.分離 Web 字體並非同步載入它們，並在 CSS 中快速使用字體顯示渲染。
8.優化圖像，並考慮將 WebP 用於關鍵頁面（例如登錄頁面）。
9.檢查是否正確設置了 HTTP 緩存頭和安全頭。
10.在伺服器上啟用 Brotli 或 Zopfli 壓縮。 （如果都行不通，那就用 Gzip 壓縮。）
11.如果HTTP / 2可用，請啟用 HPACK 壓縮，並開始監視混合內容警告。啟用 OCSP 裝訂。
12.如果可能，在服務工作緩存中緩存諸如字體，樣式，JavaScript 和圖像之類的資源。
#計畫和度量, 制定現實的目標, 定義環境, 資源優化, 構建優化, 交付優化, HTTP/2, 測試和監測
https://juejin.im/post/5c46cbaee51d453f45612a2c
（譯）2019年前端性能優化清單 — 中篇
https://juejin.im/post/5c471eaff265da616d547c8c
（譯）2019年前端性能優化清單 — 下篇
https://juejin.im/post/5c473cdae51d45518d4701ff
從 10 多秒到 1.05 秒！前端性能優化實踐
1. 建立性能優化意識
2. 目標：要比你最快的競爭對手快至少 20%
3. 選擇正確的指標
4. 從具有代表性的使用者使用的設備收集資料
5. 設置乾淨的使用者設定檔以進行測試
6. 與團隊成員分享性能清單
制定現實的目標
7. 回應時間控制在 100ms，幀速控制在 60幀/秒
8. 速度指標（SpeedIndex） < 1250，3G上的交互時間（Interaction time）小於5s，關鍵檔大小預算 < 170 Kb（gzip）
定義環境
9. 根據實際情況選擇並搭建構建工具
10. 預設情況下使用漸進增強
11. 選擇強大的性能基準
12. 評估每個框架和依賴項
13. 考慮使用 PRPL 模式和 app shell 架構
14. 優化 API 的性能
15. 您是使用 AMP 還是 Instant Articles
16. 合理使用 CDN
資源優化
17. 使用 Brotli 或 Zopfli 進行純文字壓縮
18. 使用回應式圖像和 WebP
19. 圖像是否已恰當優化
20. 視頻是否已恰當優化
21. Web 字體是否已恰當優化
構建優化
22. 分清輕重緩急
23. 考慮使用 cutting-the-mustard 技術
24. 解析 JavaScript 是昂貴的，所以保持小
25. 使用無用代碼移除（Tree-shaking） ，作用域提升（Scope hoisting）和代碼分割（Code-splitting）來減少有效負載
26. 能否將 JavaScript 卸載到 Web Worker 中
27. 能否將 JavaScript 卸載到 WebAssembl 中
28. 您使用的是預編譯器嗎
29. 僅將遺留代碼提供給傳統流覽器
30. 您是否在 JavaScript 中使用差異化服務
31. 通過增量解耦識別和重寫遺留代碼
32. 識別並刪除未使用的 CSS / JavaScript
33. 修剪 JavaScript 依賴項的大小
34. 您是否正在使用 JavaScript 塊的預測預取
35. 利用針對目標 JavaScript 引擎的優化
36. 用戶端渲染還是伺服器端渲染
37. 限制協力廠商腳本的影響
38. 正確設置 HTTP 緩存頭
交付優化
39. 非同步載入 JavaScript
40. 使用 IntersectionObserver 延遲載入昂貴的元件
41. 逐步載入圖像
42. 快速推送關鍵 CSS
43. 嘗試重新組合 CSS 規則
44. 流回應
45. 考慮使元件連接/設備記憶體感知
46. 考慮使您的元件設備具有記憶體感知能力
47. 預熱連接以加快傳送速率
48. 使用 Service workers 進行緩存和網路回退
49. 您是否使用 CDN / Edge 上的 Service workers（例如，進行A / B測試）
50. 您是否優化了渲染性能
51. 您是否優化了渲染體驗
HTTP/2
52. 遷移到HTTPS，然後打開HTTP / 2
53. 正確部署HTTP / 2
54. 您的伺服器和 CDN 是否支援 HTTP / 2
55. 是否啟用了 OCSP stapling
56. 是否採用 IPv6
57. 是否正在使用 HPACK 壓縮
測試和監測
58. 確保伺服器上的安全性是防攻擊的
59. 您是否優化了審計和調試工作流程
60. 您是否在代理流覽器和傳統流覽器中測試過
61. 您是否測試了協助工具
62. 您是否建立了連續監控
速效方案
1.測量實際環境的體驗並設定適當的目標。一個好的目標是：第一次有意義的繪製 < 1 s，速度指數（Speed Index） < 1250，在慢速的 3G 網路上的交互 < 5s，對於重複訪問，TTI < 2s。優化渲染開始時間和交互時間。
2.為主範本準備關鍵CSS，並將其包含在 <head> 頁面中。（您的預算為14 KB）。對於CSS / JS，檔大小不超過 170KB gzipped（0.7MB解壓縮）。。
3.盡可能多地減少代碼量，優化，推遲和延遲載入腳本，檢查羽量級備選方案並限制協力廠商腳本的影響。
4.僅將遺留代碼提供給舊版流覽器 <script type="module">。
5.嘗試重新組合CSS規則並測試體內 CSS。
6.添加資源提示以加快交付速度，使用 dns-lookup，preconnect，prefetch 和 preload。
7.分離 Web 字體並非同步載入它們，並在 CSS 中快速使用字體顯示渲染。
8.優化圖像，並考慮將 WebP 用於關鍵頁面（例如登錄頁面）。
9.檢查是否正確設置了 HTTP 緩存頭和安全頭。
10.在伺服器上啟用 Brotli 或 Zopfli 壓縮。 （如果都行不通，那就用 Gzip 壓縮。）
11.如果HTTP / 2可用，請啟用 HPACK 壓縮，並開始監視混合內容警告。啟用 OCSP 裝訂。
12.如果可能，在服務工作緩存中緩存諸如字體，樣式，JavaScript 和圖像之類的資源。
#計畫和度量, 制定現實的目標, 定義環境, 資源優化, 構建優化, 交付優化, HTTP/2, 測試和監測
留言
張貼留言