東莞易思訓(xùn)教育

7x24小時咨詢熱線

400-660-3310

當(dāng)前位置 : 好學(xué)校 東莞易思訓(xùn)教育 學(xué)習(xí)資訊 資訊詳情

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

2021-07-28

常見性能優(yōu)化

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

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

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

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

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

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

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

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

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

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

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

減少DOM數(shù)量

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

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

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

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

CSS

3、js相關(guān)

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

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

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

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

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

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

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

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

4、css相關(guān)

避免使用css表達式

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

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

5、Vue相關(guān)

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

異步加載路由,減少體積

通過使用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動態(tài)注冊狀態(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)的對象;

不傳遞不必要的屬性

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

收藏
分享到:

相關(guān)課程

相關(guān)資訊

東莞易思訓(xùn)教育

東莞易思訓(xùn)教育

認證等級

信譽良好,可安心報讀

東莞易思訓(xùn)教育

已獲好學(xué)校V2信譽等級認證

信譽值

  • (60-80)基礎(chǔ)信譽積累,可放心報讀
  • (81-90)良好信譽積累,可持續(xù)信賴
  • (91-100)充分信譽積累,推薦報讀

與好學(xué)校簽訂讀書保障協(xié)議:

  • 100%
  • 37
  • 1903
在線咨詢
;