✨倉庫地址：fe-performance-journey ✨

前端需要性能優化麼？

性能優化一直以來都是前端工程領域中的一個重要部分。很多資料^[1][2][3]表明，網站應用的性能優化對於提高用户留存、轉化率等都有積極影響。可以理解為，提升你的網站性能，就是提升你的業務數據（甚至是業務收入）。

性能優化廣義上包含前端優化和後端優化。後端優化的關注點更多的時候是在增加資源利用率、降低資源成本以及提高穩定性上。相較於後端，前端的性能優化會更直接與用户的體驗掛鈎。從用户體驗側來説，前端服務 5s 的加載時間優化縮減 80%(1s) 與後端服務 50ms 的響應優化縮減 80%(10ms) 相比，用户的體驗提升會更大。因此很多時候，與體驗相關的性能的瓶頸會出現在前端。

如何學習前端性能優化？

作為前端工程師，大家其實都具備一定的性能優化意識，同時也有自己的優化“武器庫”，例如懶加載、資源合併、避免 reflow 等等。雖然大家對性能優化都有自己的思路，不過大多是分散在某幾個點，較難形成一個完整的體系。業界也有很多優質的資料，例如雅虎的性能優化 35 條^[4]，但是 性能優化作為一個系統性工程，大家想要系統性地去學習並不容易。

從用户開始訪問你的網站應用，到最終它在上面瀏覽信息、操作交互，其間經歷了非常多的環節，每個環節都有可能出現性能問題，同時也是我們實現性能提升機會。所以，前端性能優化會要求你從整體維度來分析系統，甚至是業務。

那麼如何能夠更有效地梳理與理解性能優化呢？回想到每每面試都會被問到：“從地址欄輸入XXX到訪問之間經歷了什麼？”其實我們也可以從這個視角來看待性能優化。

從訪問開始，用户可能會經歷類似「查詢緩存 -> 發送請求 -> 等待響應 -> 頁面解析 -> 下載並處理各類靜態資源 -> 運行時 -> 預加載（等待後續的請求）」這樣一個不斷往復的“旅程” —— 也就是我們的「性能優化之旅」。Web 應用在其中每一站都可能遇到性能問題，當然也會有對應的優化手段。

所以在這次的「性能優化之旅」會沿着這條路徑具體介紹每個環節中常見的性能問題以及優化技術。通過與 Web 應用的訪問流程相結合，幫助大家全面理解與掌握前端的性能優化。

下面是整體的大綱：

圖片描述

如果準備好了，咱們就可以出發了 ——

旅途的行程路線?

目前內容已全部更新至 ✨ fe-performance-journey ✨ 倉庫中，陸續會將內容同步。如果希望儘快閲讀相關內容，可以直接去該倉庫中瀏覽文章。

喜歡的朋友可以 star 一下，後續也會繼續更新更多性能優化相關的內容。

• 第一站 - 緩存
• 第二站 - 發送請求
• 第三站 - 服務端處理
• 第四站 - 下載與解析頁面

• 第五站 - 頁面靜態資源

  • JavaScript
  • CSS
  • 圖片
  • 字體
  • 視頻
• 第六站 - 運行時
• 第七站 - 預加載
• 尾聲

• TODO:

  • 性能指標
  • 性能監控

參考資料

1. Driving user growth with performance improvements
2. How Fast Should A Website Load in 2019?
3. How long will you wait for a shopping website to load?
4. Best Practices for Speeding Up Your Web Site (Yahoo)
5. 17 Things People Absolutely Hate About Your Website
6. Why Performance Matters