為什么需要項目優(yōu)化

在互聯網快速發(fā)展的今天，在實現完功能之后，項目優(yōu)化是一個被經常提到的話題。很多項目會在開發(fā)排期中留大量時間去做一輪又一輪的性能優(yōu)化，就是為了讓頁面盡可能早的到達用戶，提高交互的流暢程度。

在系統(tǒng)可利用系統(tǒng)資源有限的大背景下，3秒呈現內容的原則下，項目優(yōu)化顯得格外重要。

每減少0.1秒加載速度可能會給你帶來幾百甚至幾千的用戶活躍；每減少100K的內容請求可能會給你帶來幾千甚至幾萬的的服務端費用；每提高10%的交互流暢度可能給你帶來幾萬甚至幾十萬的銷售額。

于情于理，我們都需要去了解，掌握和使用網站優(yōu)化這項必備技能。

雅虎的網站優(yōu)化準則

由之前的十四條增加到三十五條，劃分為七個模塊Content,Server,Cookie,Css,Javascript,Images,Mobile

國內還可以找到十四條的譯文?傳送門

常見優(yōu)化方法

從資源請求數量+代碼執(zhí)行效率兩個角度來考慮

DOM結構

? ? 1.樣式表放在頭部，防止白屏和閃屏

? ? 2.JS腳本放在底部或異步獲取，防止阻塞資源加載

? ? 3.使用語義化標簽，優(yōu)化精簡DOM結構

? ? 4.減少DOM操作頻率

? ? 5.減少重繪與回流

JS腳本

? ? 1.優(yōu)化腳本結構，移除重復的腳本

? ? 2.模塊就近加載（CMD）

? ? 3.按需加載加載組件和路由

? ? 4.圖片懶加載，列表分頁

? ? 5.使用節(jié)流與防抖減少事件觸發(fā)頻率

? ? 6.盡量使用CSS動畫代替js動畫，開啟硬件加速

資源打包上線

? ? 1.使用打包構建工具（webpack）清除注釋，壓縮頁面資源，js、css、html、圖片、字體等等

? ? 2.混淆js代碼

? ? 3.分離非業(yè)務邏輯相關vendor依賴，使用長緩存緩存和CDN分發(fā)網絡

服務器優(yōu)化

? ? 1.減少Http請求，合并頁面資源，js，css單一入口。js特殊可以分為兩個文件，一個業(yè)務邏輯，一個非業(yè)務邏輯

? ? 2.把小圖標合成雪碧圖，不太適用經常更新的移動端開發(fā)

? ? 3.把小的圖片，字體等資源base64化

? ? 4.開啟GZip壓縮，減少資源傳輸大小

? ? 5.使用強緩存和協商緩存，減少資源重復請求

Vue中可以優(yōu)化的點?

? ? 1.Vue庫dist里面的Runtime-only比Runtime+Compiler小30%

? ? 2.Vue的計算屬性會根據依賴的data進行緩存

? ? 3.keep-alive可以緩存常用組件

? ? 4.Vuex中的getter也會根據依賴的state進行緩存

? ? 5.v-for中唯一key的使用

? ? 6.Vue全局錯誤處理errorHandle

? ? 7.Vue路由懶加載

? ? 8.Vue組件動態(tài)加載

React中可以優(yōu)化的點

? ? 1.在constructor改變this指向代替箭頭函數和render內綁定this，避免函數作為props帶來不必要的rerender

? ? 2.shouldComponentUpdate，減少不不必要的rerender

? ? 3.PureComponent高性能組件只響應引用數據的深拷貝

? ? 4.使用唯一key優(yōu)化list diff

? ? 5.合并setState操作，減少虛擬dom對比頻率

? ? 6.React路由動態(tài)加載react-loadable