1. 程式人生 > >如何提升前端效能和響應速度

如何提升前端效能和響應速度

如何提升前端效能和響應速度

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

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

2. 原生 js 代替第三方庫

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

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

有些第三方庫會比較大,如果提供單個模組的使用方式,就儘量使用子模組代替使用整個包,比如lodash

jquery-ui 等。

以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,可以用DllPluginSplitChunksPlugin 做檔案分割。

8. 按需載入

對於很多應用來說,特別是 SPA 應用,有些資源是沒必要在首屏就加載出來的,而是等到要用的時候才載入,這就是按需載入。按需載入可以減小首屏載入檔案的體積,達到提高響應速度的目的。

上面的程式碼中只有當點選了#about元素後,才會載入about.js檔案。

9.rollup

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

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

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

比如:

原始碼

rollup打包後的程式碼:

webpack打包後的程式碼:

10.prepack

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

prepack 便是這樣的一個工具,它的思路大致是這樣:

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

原始碼

編譯後的程式碼

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

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

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

// 下面是 less, scss, css 語法


最後:

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