requestAnimationFrame 簡單使用

官方講解：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í)行會進任務線程隊列中，如果線程處于忙碌狀態(tài)问芬，那么動畫不會立刻執(zhí)行悦析。問題三，頁面被隱藏或最小化時此衅，仍在后臺執(zhí)行動畫任務强戴。
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>

最后編輯于：2020.09.23 14:16:32

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者