前端效能優化原理與實踐

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

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

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

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

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

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

冊子分為幾個大部分：

一、網路篇

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

二、儲存篇

 ●  探究快取、本地儲存的機制和應用策略

三、渲染篇

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

四、擴充篇

 ●  CDN、Gzip 等知識點發散學習

五、應用篇

 ●  常見效能面試內容教學

六、效能監測篇

 ●  探究開發者工具和 W3C API

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

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

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

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

原文釋出時間為：2018-10-24

本文作者：掘金小冊

本文來自雲棲社群合作伙伴“前端大學”，瞭解相關資訊可以關注“前端大學”。