如何提升前端效能和響應速度
如何提升前端效能和響應速度
1. 原生 css 動畫代替 js 動畫
原生 css 動畫要比 js 實現的動畫要高效很多，所以在可能的情況下儘量用原生 css 動畫。
2. 原生 js 代替第三方庫
因為第三方庫不可避免的會增大打包檔案的體積，並且有很多我們用不著的程式碼和效能的損失，所以在可能的情況下儘量用原生 js 的 api，代替第三方庫的 api，比如 jquery、lodash、underscore、moment等。
3. 使用第三方庫時，用子模組代替整個包
有些第三方庫會比較大，如果提供單個模組的使用方式，就儘量使用子模組代替使用整個包，比如lodash
以lodash為例：
4. 用高效的 api 代替低效的 api
如果相同的功能可以有多種選擇，應當儘量使用高效的一種方案。
比如：
用document.getElementById, document.getElementsByClassName, document.getElementsByTagName代替document.querySelector, document.querySelectorAll
用el.innerHTML代替document.createElement, el.appendChild
5. 扁平結構、避免無用巢狀
避免無用的閉包、無用的塊作用域，儘量是程式碼結構扁平化。
比如：
6. 用 es6 的模組化
現在js的模組化主要是commonjs與es6模組化規範，但是在開發的時候，建議是用es6的模組化規範，因為es6的模組化可以使用Tree Shaking的功能。
這個功能能夠在構建工具打包程式碼時，對程式碼進行分析，只有真正用到的程式碼會被打包，沒有用到的則不會。
上面的程式碼以two.js為入口進行打包，則one.js中只有export const smile = {}會被打包，而export const cry = []不會。
7. 合併、壓縮、分割
程式碼的合併與壓縮是前端的必修課，如果使用webpack來打包，webpack會自動幫我們完成，一般無需關心。
另外，在有些時候，程式碼是需要做分割的，因為webpack會把程式碼都打包到一個檔案中，當這個檔案很大的時候，就需要分割成多個小檔案。一般建議 bundle 檔案最大不超過350k。
對於webpack，可以用DllPlugin或SplitChunksPlugin 做檔案分割。
8. 按需載入
對於很多應用來說，特別是 SPA 應用，有些資源是沒必要在首屏就加載出來的，而是等到要用的時候才載入，這就是按需載入。按需載入可以減小首屏載入檔案的體積，達到提高響應速度的目的。
上面的程式碼中只有當點選了#about元素後，才會載入about.js檔案。
9.rollup
前端效能的優化除了從語法、http 協議、工程結構方向之外，構建工具也是一個可以優化的方向。
對於前端開發者來說，基本上都用webpack來打包專案，但webpack帶給我們強大功能的同時，也會有一些副作用產生，就是會產生很多冗餘的程式碼（如果你有檢視過 webpack 的 bundle 檔案，便會發現）。
如果你的專案不需要處理靜態資源（如圖片），也不需要按需載入，並追求前端高效能的話，可以嘗試rollup。
比如：
原始碼
rollup打包後的程式碼：
webpack打包後的程式碼：
10.prepack
前端效能的優化還有一個方向，就是預編譯指令碼，即把原本在執行階段才解析的程式碼通過工具預執行，然後只留下結果。
把不依賴外部環境的邏輯提前進行運算，並把運算結果替換到相應的原始碼處，然後從原始碼中移除這段邏輯。
原始碼
編譯後的程式碼
11. css 選擇器不要巢狀太深
對於前端來說，css對效能影響比較小，所以，這裡只提一點最常見、也是最有效果的建議：選擇器不要巢狀太深。
一般建議選擇器層級在 2 級以內，最多不超過 3 級。
// 下面是 less, scss, css 語法
最後：
“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”
