常見性能優化

1、構建工具帶來的

前置css，后置js，防止js加載，運行阻塞頁面渲染

將小圖達成base64，減少資源請求。[file-loader,url-loader,...]

壓縮精簡html，css和js，減小打包體積。[uglifyjs,OptimizeCssAssetsPlugin,...]

Gzip壓縮打包后的文件，該功能需要服務器支持才能正常顯示頁面

css預處理器，開啟css編程之路

2、瀏覽器相關

使用CDN分發網絡，請求資源更快

減少HTTP請求次數，減少DNS查詢次數(盡量減少主機名)，避免重定向

DNS預獲取link標簽ref='dns-prefetch'herf=''

使AJAX可緩存：get請求可在客戶端緩存;post請求不能再客戶端緩存，但是服務端可以緩存數據(redis，memorycache等)，提高請求速度。

減少DOM數量

避免重排和重繪:減少DOM操作，動畫優先使用opacity，transform屬性;

合并DOM的讀寫操作，如使用document.createDocumentFragment();

使用特殊的函數，優化條件渲染：window.requestAnimationFrame()，window.requestIdleCallback()

時間分片函數，使用requestAnimationFrame和createDocumentFragment

3、js相關

使用 JavaScript CacheAPI，我們可以使用serviceworker。

延遲不必要的JS首屏加載defer,aysc,動態添加script節點

刪除未使用的 JavaScript和合并重復的代碼減少編譯時間(JIT)

避免內存泄漏意外的全局變量;沒有銷毀的計時器;已經刪除的DOM還是被引用，(刪除DOM后將變量設值為null可以避免這個問題)

避免使用全局變量&優先使用局部變量，作用域鏈查找更快

使用Webworkers處理需要大量執行時間的代碼(子線程)

合理使用事件代理。合并類似的操作，節約內存空間，減少DOM操作

使用高級函數等，例如addEvent的兼容惰性加載函數;map的性能高于forEach

4、css相關

避免使用css表達式

使用csssprite雪碧圖，減少圖片請求

在不影響畫質的情況下，使用合理的圖片格式和壓縮圖片，優先使用JPG格式，如果能用css3實現動畫，則盡量不使用GIF。如果能使用canvas或SVG實現，則盡量不使用圖片

5、Vue相關

在vue2.0中不在data上使用嵌套多層的對象，或使用Object.freeze凍結對象。vue3中使用了lazyreactive不用擔心這個。

異步加載路由，減少體積

通過使用require.context。自動生成路由

//../components/test目錄下的vue文件

let_req=require.context('../components/test',true,/\.vue$/)letroutes=[]

_req.keys().map(name=>{

constnameArr=name.split('.')//模塊的export.defalut

constcomp=_req(name).defaultroutes.push({path:`/test${nameArr[1]}`,component:comp,title:comp.name})});

exportdefaultroutes

通過$store.registerModule動態注冊狀態樹，減小打包體積。(混入beforeCreate，異步加載store的模塊)

Vue.mixin({

beforeCreate:function(){

if(this.$options[config.dynamicVuex]){

letname=config.moduleName||this.$options.nameconsole.log('name=',ame)import(`./store/module/${name}.store.js`).

then(module=>

{//orrequire.ensuret

his.$store.registerModule(name,module.default)

})

}

}})

6、React相關

更合理的傳遞state和props:

在構造函數里使用bind;

盡量不使用內聯的對象;

不傳遞不必要的屬性

合理使用shouldComponentUpdate生命鉤子和繼承PureComponent組件