前端性能優化原理與實踐

在當下迭代飛快的互聯網環境下，性能優劣至關重要，差的性能足以摧毀一個好的網站。

具體到 Web 站點的性能優化，其實後台優化的技術已經比較成熟——比如資料庫的優化、後台代碼的優化等等。成熟到什麼程度呢？很多 Web 網頁，真正花費在 Web 伺服器到終端用戶的時間其實往往不超過整個響應時間的一兩成。

相比之下，工程師們對前端性能優化的研究和重視度還遠遠不夠。

就國內的情況來看，許多站點並不關注前端的性能優化，這方面的研究也相對較少。事實上前端的優化空間非常大，誰能把握住這巨大的優化空間，誰就可以為自己的互聯網產品爭得用戶流量的先機。

大家能夠發現自己手上的淘寶、京東等頁面越來越快，到大廠面試時性能優化也成了一個繞不過去的彎——前端性能優化終於到了手握一個應用體驗質量的生殺大權的時代了！單單掌握 React 或者 Vue 以應對基本的業務開發已經不那麼 OK 了。作為前端工程師，性能優化已經進化為了我們的必修課之一。

一位來自於阿里巴巴，有著多年前端開發經驗的高級工程師給我們帶來了一本小冊子，其梳理了自己多年來在前端性能優化方面的經驗，以幫助更多工程師更快，更深入的了解前端方面的性能優化。

冊子分為幾個大部分：

一、網路篇

善用構建工具，學會圖片選型

二、存儲篇

探究緩存、本地存儲的機制和應用策略

三、渲染篇

探索渲染原理，學習核心策略

四、拓展篇

CDN、Gzip 等知識點發散學習

五、應用篇

常見性能面試內容教學

六、性能監測篇

探究開發者工具和 W3C API

希望通過這本小冊，儘可能降低一些大家學習性能優化的成本。

一方面，為沒有接觸過性能優化的新同學建立起一個正確的前端性能優化的「世界觀」，從而使性能優化這件事情有跡可循。另一方面，為在職的工程師們提供一線團隊已經實踐過的「方法論」，形成一個性能優化思路索引表。

本小冊將從網路層面和渲染層面兩個大的維度來逐個點亮前端性能優化的技能樹。

整個的知識圖譜，用思維導圖展示如下：

為了寫出更好的文字，更好服務技術人，小冊子選擇了收取一些費用。該冊子，目前通過下方二維碼購買是8折優惠，15.92元，限時一周。

目前一些章節免費，歡迎掃碼閱讀。

對 前端優化 不感興趣也沒關係，大家幫轉一下，讓更多的原創乾貨被更多的技術人看到，感謝。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！