抖動與節(jié)流實(shí)現(xiàn)的方式都是借助了定時器setTimeout，但是如果頁面只需要兼容高版本瀏覽器或應(yīng)用在移動端，又或者頁面需要追求高精度的效果，那么可以使用瀏覽器的原生方法rAF（requestAnimationFrame）。
　　requestAnimationFrame
　　window.requestAnimationFrame() 這個方法是用來在頁面重繪之前，通知瀏覽器調(diào)用一個指定的函數(shù)。這個方法接受一個函數(shù)為參，該函數(shù)會在重繪前調(diào)用。
　　rAF常用于web動畫的制作，用于準(zhǔn)確控制頁面的幀刷新渲染，讓動畫效果更加流暢，當(dāng)然它的作用不僅僅局限于動畫制作，因?yàn)橥瑫r它也是一個定時器。
　　通常來說，rAF被調(diào)用的頻率是每秒60次，也就是1000/60，觸發(fā)頻率大概是16.7ms。
　　簡單而言，使用 requestAnimationFrame 來觸發(fā)滾動事件，相當(dāng)于上面的：
　　throttle(func, xx, 16.7) //xx 代表 xx ms內(nèi)不會重復(fù)觸發(fā)事件 handler
　　簡單的示例如下：
var ticking = false; // rAF 觸發(fā)鎖
function onScroll(){
　 if(!ticking) {
　 requestAnimationFrame(realFunc);
　ticking = true;
　 }
}
function realFunc(){
// do something...
　 console.log("Success");
　 ticking = false;
}
// 滾動事件監(jiān)聽
window.addEventListener('scroll', onScroll, false);
　　上面簡單的使用rAF的例子可以拿到瀏覽器下試一下，大概功能就是在滾動的過程中，保持以16.7ms的頻率觸發(fā)事件handler。
　　使用requestAnimationFrame優(yōu)缺點(diǎn)并存，首先我們不得不考慮它的兼容問題，其次因?yàn)樗荒軐?shí)現(xiàn)以16.7ms的頻率來觸發(fā)，代表它的可調(diào)節(jié)性十分差。但是相比throttle(func, xx, 16.7)，用于更復(fù)雜的場景時，rAF可能效果更佳，性能更好。
　　總結(jié)一下
　　防抖動：防抖技術(shù)即是可以把多個順序地調(diào)用合并成一次，也就是在一定時間內(nèi)，規(guī)定事件被觸發(fā)的次數(shù)。
　　節(jié)流函數(shù)：只允許一個函數(shù)在 X 毫秒內(nèi)執(zhí)行一次，只有當(dāng)上一次函數(shù)執(zhí)行后過了你規(guī)定的時間間隔，才能進(jìn)行下一次該函數(shù)的調(diào)用。
　　rAF：16.7ms觸發(fā)一次handler，降低了可控性，但是提升了性能和精確度。
　　簡化scroll內(nèi)的操作
　　上面介紹的方法都是如何去優(yōu)化scroll事件的觸發(fā)，避免scroll事件過度消耗資源的。
　　但是從本質(zhì)上而言，我們應(yīng)該盡量去精簡scroll事件的handler，將一些變量的初始化、不依賴于滾動位置變化的計(jì)算等都應(yīng)當(dāng)在scroll事件外提前就緒。
　　建議如下：
　　避免在scroll事件中修改樣式屬性 / 將樣式操作從scroll事件中剝離
　　輸入事件處理函數(shù)，比如scroll/touch事件的處理，都會在requestAnimationFrame之前被調(diào)用執(zhí)行。
　　因此，如果你在scroll事件的處理函數(shù)中做了修改樣式屬性的操作，那么這些操作會被瀏覽器暫存起來。然后在調(diào)用requestAnimationFrame的時候，如果你在一開始做了讀取樣式屬性的操作，那么這將會導(dǎo)致觸發(fā)瀏覽器的強(qiáng)制同步布局。