>[danger]介紹一下Js中的requestAnimationFrame >[info]建議回答 * **requestAnimationFrame**是一個 JavaScript 函數，用于優化動畫效果的實現。**它的調用頻率通常為每秒60次**，可以在瀏覽器每個繪制幀之前執行回調函數，以確保動畫的流暢性和響應速度，**并避免了使用 setTimeout 或 setInterval 時可能導致的性能問題**。 * 與 setTimeout 和 setInterval 相比， **requestAnimationFrame**可以更精確地控制動畫的播放時間，從而保證動畫的流暢性和響應速度。`setInterval`與`setTimeout`是在指定的時間間隔內重復執行一個操作，不會考慮瀏覽器的重繪，是按照指定的時間間隔執行回調函數，可能會被延遲執行，從而影響動畫的流暢度。 * requestAnimationFrame 的回調函數只有在瀏覽器下一次繪制之前才執行，這意味著當頁面處于非激活狀態時，動畫就會暫停，從而**避免了不必要的 CPU 和 GPU 資源消耗**。 * requestAnimationFrame 在繪制每一幀時，**會自動根據屏幕刷新率進行同步**，從而得到最佳的動畫效果和性能表現。 >[info]技術詳解 requestAnimationFrame 是一個 JavaScript 函數，用于優化動畫效果的實現。它可以在瀏覽器每個繪制幀之前執行回調函數，以確保動畫的流暢性和響應速度，**并避免了使用 setTimeout 或 setInterval 時可能導致的性能問題**。 requestAnimationFrame 的使用方法： ```javascript function animation() { // 動畫邏輯代碼 requestAnimationFrame(animation); } requestAnimationFrame(animation); ``` 在上述代碼中，animation 函數包含動畫邏輯，通過 requestAnimationFrame 不斷地更新動畫狀態實現動畫的連貫播放。由于 requestAnimationFrame 方法會在瀏覽器下一次繪制前執行回調函數，因此可以確保動畫效果平滑且符合用戶的操作反應速度，同時也不會對瀏覽器的性能造成太大影響。 >[info]requestAnimationFrame 的優點： 1. 與 setTimeout 和 setInterval 相比，requestAnimationFrame 可以更精確地控制動畫的播放時間，從而保證動畫的流暢性和響應速度。 2. requestAnimationFrame 的回調函數只有在瀏覽器下一次繪制之前才執行，這意味著當頁面處于非激活狀態時，動畫就會暫停，從而避免了不必要的 CPU 和 GPU 資源消耗。 3. requestAnimationFrame 在繪制每一幀時，會自動根據屏幕刷新率進行同步，從而得到最佳的動畫效果和性能表現。 需要注意的是，requestAnimationFrame 并不能完全解決所有的動畫問題，有些復雜的動畫仍然需要結合 CSS 過渡或者動畫來實現。此外，使用 requestAnimationFrame 時也需要考慮兼容性問題，較老版本的瀏覽器可能不支持該方法，需要采取相應的兼容策略。 >[info]與setInterval和setTimeout對比 `requestAnimationFrame`的調用頻率通常為每秒60次。這意味著我們可以在每次重繪之前更新動畫的狀態，并確保動畫流暢運行，而不會對瀏覽器的性能造成影響。 `setInterval`與`setTimeout`它可以讓我們在指定的時間間隔內重復執行一個操作，不會考慮瀏覽器的重繪，而是按照指定的時間間隔執行回調函數，可能會被延遲執行，從而影響動畫的流暢度。 >效果對比 我們設置了兩個容器，分別用`requestAnimationFrame()`方法和`setTimeout`方法進行平移效果，Js 代碼如下所示： ``` let distance = 0 let box = document.getElementById('box') let box2 = document.getElementById('box2') window.addEventListener('click', function () { requestAnimationFrame(function move() { box.style.transform = `translateX(${distance++}px)` requestAnimationFrame(move)//遞歸 }) setTimeout(function change() { box2.style.transform = `translateX(${distance++}px)` setTimeout(change, 17) }, 17) }) ``` 效果圖如下：  可能我們肉眼看得不是很清楚，但是確實下面的圖形平移沒有上面圖形流暢，用`setTimeout`會有卡頓現象。