官方講解：window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行。
簡單的說就是css渲染前調(diào)用。很好理解，如對比setInterval運行后去更新頁面，同樣的rAF也是運行后更新頁面。
rAF運行
（圖中S：收集css數(shù)據(jù) ，L：創(chuàng)建渲染樹，找出頁面上所有數(shù)據(jù)以及元素位置，P：創(chuàng)建實際像素數(shù)據(jù)，繪制內(nèi)容到頁面。）
setInterval對比rAF
setInterval：問題一，動畫的循時間環(huán)間隔不好確定。問題二，代碼執(zhí)行會進(jìn)任務(wù)線程隊列中，如果線程處于忙碌狀態(tài)，那么動畫不會立刻執(zhí)行。問題三，頁面被隱藏或最小化時，仍在后臺執(zhí)行動畫任務(wù)。
rAF：好處一，CPU節(jié)能，頁面處于未激活的狀態(tài)下，rAF也會停止渲染。好處二，高頻刷新下，可保證每次繪制間隔內(nèi)，函數(shù)只被執(zhí)行一次，保證流暢性，節(jié)省函數(shù)執(zhí)行的開銷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html, body{
height: 100vh;
}
</style>
<body>
<div style="height: 200%;width: 500;margin:0 auto;">滾動</div>
<script>
let scrollTop = document.documentElement.scrollTop
let scrollHeight = document.documentElement.scrollHeight
let winHeight = window.innerHeight
let animation = null
function step() {
console.log(scrollTop)
if(scrollTop + winHeight < scrollHeight){
scrollTop = scrollTop + 1
document.documentElement.scrollTop = scrollTop
animation = requestAnimationFrame(step);
} else {
cancelAnimationFrame(animation)
}
}
requestAnimationFrame(step)
</script>
</body>
</html>
