前端面試題匯總之常見性能優(yōu)化

常見性能優(yōu)化

1、構(gòu)建工具帶來的

前置css，后置js，防止js加載，運(yùn)行阻塞頁(yè)面渲染

將小圖達(dá)成base64，減少資源請(qǐng)求。[file-loader,url-loader,...]

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

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

css預(yù)處理器，開啟css編程之路

2、瀏覽器相關(guān)

使用CDN分發(fā)網(wǎng)絡(luò)，請(qǐng)求資源更快

減少HTTP請(qǐng)求次數(shù)，減少DNS查詢次數(shù)(盡量減少主機(jī)名)，避免重定向

DNS預(yù)獲取link標(biāo)簽ref='dns-prefetch'herf=''

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

減少DOM數(shù)量

避免重排和重繪:減少DOM操作，動(dòng)畫優(yōu)先使用opacity，transform屬性;

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

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

時(shí)間分片函數(shù)，使用requestAnimationFrame和createDocumentFragment

3、js相關(guān)

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

延遲不必要的JS首屏加載defer,aysc,動(dòng)態(tài)添加script節(jié)點(diǎn)

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

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

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

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

合理使用事件代理。合并類似的操作，節(jié)約內(nèi)存空間，減少DOM操作

使用高級(jí)函數(shù)等，例如addEvent的兼容惰性加載函數(shù);map的性能高于forEach

4、css相關(guān)

避免使用css表達(dá)式

使用csssprite雪碧圖，減少圖片請(qǐng)求

在不影響畫質(zhì)的情況下，使用合理的圖片格式和壓縮圖片，優(yōu)先使用JPG格式，如果能用css3實(shí)現(xiàn)動(dòng)畫，則盡量不使用GIF。如果能使用canvas或SVG實(shí)現(xiàn)，則盡量不使用圖片

5、Vue相關(guān)

在vue2.0中不在data上使用嵌套多層的對(duì)象，或使用Object.freeze凍結(jié)對(duì)象。vue3中使用了lazyreactive不用擔(dān)心這個(gè)。

異步加載路由，減少體積

通過使用require.context。自動(dòng)生成路由

//../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動(dòng)態(tài)注冊(cè)狀態(tài)樹，減小打包體積。(混入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相關(guān)

更合理的傳遞state和props:

在構(gòu)造函數(shù)里使用bind;

盡量不使用內(nèi)聯(lián)的對(duì)象;

不傳遞不必要的屬性

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