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

1、用對選擇器

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

id選擇器（#myid）

類選擇器（.myclassname）

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

相鄰選擇器（h1+p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover,li:nth-child）

2、使用requestAnimationFrame來替代setTimeout和setInterval

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

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

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

4、使用web worker

客戶端javascript一個(gè)基本的特性是單線程：比如，瀏覽器無法同時(shí)運(yùn)行兩個(gè)事件處理程序，它也無法在一個(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í)，也要注意其瀏覽器兼容性