1. 原生 css 動畫代替 js 動畫

原生 css 動畫要比 js 實現的動畫要高效很多，所以在可能的情況下儘量用原生 css 動畫。

可以參考：

You-Dont-Need-JavaScript

css animation

css @keyframes

css transform

css transition

2. 原生 js 代替第三方庫

因為第三方庫不可避免的會增大打包檔案的體積，並且有很多我們用不著的程式碼和效能的損失，所以在可能的情況下儘量用原生 js 的 api，代替第三方庫的 api，比如jquery、lodash、underscore、moment等。

可以參考：

You-Dont-Need-jQuery

You-Dont-Need-Lodash-Underscore

You-Dont-Need-Momentjs

3. 使用第三方庫時，用子模組代替整個包

有些第三方庫會比較大，如果提供單個模組的使用方式，就儘量使用子模組代替使用整個包，比如lodash、jquery-ui 等。

以lodash為例： 4. 用高效的 api 代替低效的 api

如果相同的功能可以有多種選擇，應當儘量使用高效的一種方案。

比如： 5. 扁平結構、避免無用巢狀

避免無用的閉包、無用的塊作用域，儘量是程式碼結構扁平化。

比如： 6. 用 es6 的模組化

現在js的模組化主要是commonjs與es6模組化規範，但是在開發的時候，建議是用es6的模組化規範，因為es6的模組化可以使用Tree Shaking的功能。

這個功能能夠在構建工具打包程式碼時，對程式碼進行分析，只有真正用到的程式碼會被打包，沒有用到的則不會。 上面的程式碼以two.js為入口進行打包，則one.js中只有export const smile = {}會被打包，而export const cry = []不會。

關於Tree Shaking，可以參考：

tree-shaking

webpack 如何優雅的使用tree-shaking（搖樹優化）

7. 合併、壓縮、分割

程式碼的合併與壓縮是前端的必修課，如果使用webpack來打包，webpack會自動幫我們完成，一般無需關心。

另外，在有些時候，程式碼是需要做分割的，因為webpack會把程式碼都打包到一個檔案中，當這個檔案很大的時候，就需要分割成多個小檔案。一般建議 bundle 檔案最大不超過350k。

對於webpack，可以用DllPlugin或SplitChunksPlugin 做檔案分割。

8. 按需載入

對於很多應用來說，特別是 SPA 應用，有些資源是沒必要在首屏就加載出來的，而是等到要用的時候才載入，這就是按需載入。按需載入可以減小首屏載入檔案的體積，達到提高響應速度的目的。 上面的程式碼中只有當點選了#about元素後，才會載入about.js檔案。

可以參考：

proposal-dynamic-import

webpack dynamic-imports

9.rollup

前端效能的優化除了從語法、http 協議、工程結構方向之外，構建工具也是一個可以優化的方向。

對於前端開發者來說，基本上都用webpack來打包專案，但webpack帶給我們強大功能的同時，也會有一些副作用產生，就是會產生很多冗餘的程式碼（如果你有檢視過 webpack 的 bundle 檔案，便會發現）。

如果你的專案不需要處理靜態資源（如圖片），也不需要按需載入，並追求前端高效能的話，可以嘗試rollup。

比如：

原始碼 rollup打包後的程式碼： webpack打包後的程式碼： 可以參考：

rollup

webpack 之外的另一種選擇：rollup

10.prepack

前端效能的優化還有一個方向，就是預編譯指令碼，即把原本在執行階段才解析的程式碼通過工具預執行，然後只留下結果。

prepack 便是這樣的一個工具，它的思路大致是這樣：

把不依賴外部環境的邏輯提前進行運算，並把運算結果替換到相應的原始碼處，然後從原始碼中移除這段邏輯。

原始碼 編譯後的程式碼 可以參考：

prepack

js 效能優化利器：prepack

11. css 選擇器不要巢狀太深

對於前端來說，css對效能影響比較小，所以，這裡只提一點最常見、也是最有效果的建議：選擇器不要巢狀太深。

一般建議選擇器層級在 2 級以內，最多不超過 3 級。 最後：

“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”