英泰移動(dòng)通信教育

7x24小時(shí)咨詢(xún)熱線

400-660-3310

當(dāng)前位置 : 好學(xué)校 英泰移動(dòng)通信教育 學(xué)習(xí)資訊 資訊詳情

如何優(yōu)化前端性能(六):性能更好的API

2021-12-06

web前端

1、用對(duì)選擇器

選擇器的性能排序如下所示,盡量選擇性能更好的選擇器

id選擇器(#myid)

類(lèi)選擇器(.myclassname)

標(biāo)簽選擇器(div,h1,p)

相鄰選擇器(h1+p)

子選擇器(ul > li)

后代選擇器(li a)

通配符選擇器(*)

屬性選擇器(a[rel="external"])

偽類(lèi)選擇器(a:hover,li:nth-child)

2、使用requestAnimationFrame來(lái)替代setTimeout和setInterval

希望在每一幀剛開(kāi)始的時(shí)候?qū)?yè)面進(jìn)行更改,目前只有使用 requestAnimationFrame 能夠**這一點(diǎn)。使用 setTimeout 或者 setInterval 來(lái)觸發(fā)更新頁(yè)面的函數(shù),該函數(shù)可能在一幀的中間或者結(jié)束的時(shí)間點(diǎn)上調(diào)用,進(jìn)而導(dǎo)致該幀后面需要進(jìn)行的事情沒(méi)有完成,引發(fā)丟幀

3、使用IntersectionObserver來(lái)實(shí)現(xiàn)圖片可視區(qū)域的懶加載

傳統(tǒng)的做法中,需要使用scroll事件,并調(diào)用getBoundingClientRect方法,來(lái)實(shí)現(xiàn)可視區(qū)域的判斷,即使使用了函數(shù)節(jié)流,也會(huì)造成頁(yè)面回流。使用IntersectionObserver,則沒(méi)有上述問(wèn)題

4、使用web worker

客戶端javascript一個(gè)基本的特性是單線程:比如,瀏覽器無(wú)法同時(shí)運(yùn)行兩個(gè)事件處理程序,它也無(wú)法在一個(gè)事件處理程序運(yùn)行的時(shí)候觸發(fā)一個(gè)計(jì)時(shí)器。Web Worker是HTML5提供的一個(gè)javascript多線程解決方案,可以將一些大計(jì)算量的代碼交由web Worker運(yùn)行,從而避免阻塞用戶界面,在執(zhí)行復(fù)雜計(jì)算和數(shù)據(jù)處理時(shí),這個(gè)API非常有用

但是,使用一些新的API的同時(shí),也要注意其瀏覽器兼容性

收藏
分享到:

相關(guān)課程

相關(guān)資訊

英泰移動(dòng)通信教育

英泰移動(dòng)通信教育

認(rèn)證等級(jí)

信譽(yù)良好,可安心報(bào)讀

英泰移動(dòng)通信教育

已獲好學(xué)校V2信譽(yù)等級(jí)認(rèn)證

信譽(yù)值

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

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

  • 100%
  • 54
  • 3388
在線咨詢(xún)
;