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

1、用對選擇器

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

id選擇器（#myid）

類選擇器（.myclassname）

標簽選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

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

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

2、使用requestAnimationFrame來替代setTimeout和setInterval

希望在每一幀剛開始的時候對頁面進行更改，目前只有使用 requestAnimationFrame 能夠**這一點。使用 setTimeout 或者 setInterval 來觸發(fā)更新頁面的函數，該函數可能在一幀的中間或者結束的時間點上調用，進而導致該幀后面需要進行的事情沒有完成，引發(fā)丟幀

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

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

4、使用web worker

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

但是，使用一些新的API的同時，也要注意其瀏覽器兼容性