為什么需要項目優(yōu)化
在互聯(lián)網(wǎng)快速發(fā)展的今天，在實現(xiàn)完功能之后儡首，項目優(yōu)化是一個被經(jīng)常提到的話題片任。很多項目會在開發(fā)排期中留大量時間去做一輪又一輪的性能優(yōu)化，就是為了讓頁面盡可能早的到達用戶蔬胯，提高交互的流暢程度对供。
在系統(tǒng)可利用系統(tǒng)資源有限的大背景下，3秒呈現(xiàn)內(nèi)容的原則下氛濒，項目優(yōu)化顯得格外重要产场。
每減少0.1秒加載速度可能會給你帶來幾百甚至幾千的用戶活躍；每減少100K的內(nèi)容請求可能會給你帶來幾千甚至幾萬的的服務(wù)端費用舞竿；每提高10%的交互流暢度可能給你帶來幾萬甚至幾十萬的銷售額京景。
于情于理，我們都需要去了解骗奖，掌握和使用網(wǎng)站優(yōu)化這項必備技能确徙。
雅虎的網(wǎng)站優(yōu)化準則
由之前的十四條增加到三十五條醒串，劃分為七個模塊Content,Server,Cookie,Css,Javascript,Images,Mobile
國內(nèi)還可以找到十四條的譯文?傳送門
常見優(yōu)化方法
從資源請求數(shù)量+代碼執(zhí)行效率兩個角度來考慮
DOM結(jié)構(gòu)
? ? 1.樣式表放在頭部，防止白屏和閃屏
? ? 2.JS腳本放在底部或異步獲取鄙皇，防止阻塞資源加載
? ? 3.使用語義化標簽芜赌，優(yōu)化精簡DOM結(jié)構(gòu)
? ? 4.減少DOM操作頻率
? ? 5.減少重繪與回流
JS腳本
? ? 1.優(yōu)化腳本結(jié)構(gòu)，移除重復(fù)的腳本
? ? 2.模塊就近加載（CMD）
? ? 3.按需加載加載組件和路由
? ? 4.圖片懶加載伴逸，列表分頁
? ? 5.使用節(jié)流與防抖減少事件觸發(fā)頻率
? ? 6.盡量使用CSS動畫代替js動畫缠沈，開啟硬件加速
資源打包上線
? ? 1.使用打包構(gòu)建工具（webpack）清除注釋，壓縮頁面資源错蝴，js洲愤、css、html漱竖、圖片禽篱、字體等等
? ? 2.混淆js代碼
? ? 3.分離非業(yè)務(wù)邏輯相關(guān)vendor依賴畜伐，使用長緩存緩存和CDN分發(fā)網(wǎng)絡(luò)
服務(wù)器優(yōu)化
? ? 1.減少Http請求馍惹，合并頁面資源，js玛界，css單一入口万矾。js特殊可以分為兩個文件，一個業(yè)務(wù)邏輯慎框，一個非業(yè)務(wù)邏輯
? ? 2.把小圖標合成雪碧圖良狈，不太適用經(jīng)常更新的移動端開發(fā)
? ? 3.把小的圖片，字體等資源base64化
? ? 4.開啟GZip壓縮笨枯，減少資源傳輸大小
? ? 5.使用強緩存和協(xié)商緩存薪丁，減少資源重復(fù)請求
Vue中可以優(yōu)化的點?
? ? 1.Vue庫dist里面的Runtime-only比Runtime+Compiler小30%
? ? 2.Vue的計算屬性會根據(jù)依賴的data進行緩存
? ? 3.keep-alive可以緩存常用組件
? ? 4.Vuex中的getter也會根據(jù)依賴的state進行緩存
? ? 5.v-for中唯一key的使用
? ? 6.Vue全局錯誤處理errorHandle
? ? 7.Vue路由懶加載
? ? 8.Vue組件動態(tài)加載
React中可以優(yōu)化的點
? ? 1.在constructor改變this指向代替箭頭函數(shù)和render內(nèi)綁定this，避免函數(shù)作為props帶來不必要的rerender
? ? 2.shouldComponentUpdate馅精，減少不不必要的rerender
? ? 3.PureComponent高性能組件只響應(yīng)引用數(shù)據(jù)的深拷貝
? ? 4.使用唯一key優(yōu)化list diff
? ? 5.合并setState操作严嗜，減少虛擬dom對比頻率
? ? 6.React路由動態(tài)加載react-loadable
