首先，要理解JS的執(zhí)行是單線程的，在一輪Event Loop的時候，會執(zhí)行所有同步JS代碼。

setInterval的運行機制是，將指定的代碼移出本次執(zhí)行，等到下一輪Event Loop時，再檢查是否到了指定時間。如果到了，就執(zhí)行對應的代碼；如果不到，就等到再下一輪Event Loop時重新判斷。這意味著，setTimeout指定的代碼，必須等到本次執(zhí)行的所有代碼都執(zhí)行完，才會執(zhí)行。

每一輪Event Loop時，都會將“任務隊列”中需要執(zhí)行的任務，一次執(zhí)行完。setTimeout和setInterval都是把任務添加到“任務隊列”的尾部。因此，它們實際上要等到當前腳本的所有同步任務執(zhí)行完，然后再等到本次Event Loop的“任務隊列”的所有任務執(zhí)行完，才會開始執(zhí)行。由于前面的任務到底需要多少時間執(zhí)行完，是不確定的，所以沒有辦法保證，setTimeout和setInterval指定的任務，一定會按照預定時間執(zhí)行。

所以，我們如果用setInterval去實現(xiàn)動畫，當一次執(zhí)行的JS時間超過了setInterval設置的延時時間，會導致動畫看上去卡頓。jQuery實現(xiàn)動畫就是用了定時器，所以性能很一般。所以一般建議是用requestAnimationFrame或者css3動畫。

requestAnimationFrame比起setTimeout、setInterval的優(yōu)勢主要有兩點：

requestAnimationFrame會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀。

在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和內存使用量。

已了解。之前看了老師的解釋但是沒明白。后來網(wǎng)上查閱下JS單線程和定時器的工作原理后再看老師的解釋就清楚許多了。謝謝。