requestAnimationFrame vs setTimeout：动画性能的较量

在前端开发中，创建动画效果是常见的需求。开发者们通常会选择 requestAnimationFrame 或 setTimeout 来实现动画效果，但这两种方法在性能和使用场景上有着显著的区别。本文将详细探讨 requestAnimationFrame 和 setTimeout 的区别，并列举它们的应用场景。

requestAnimationFrame 简介

requestAnimationFrame 是 HTML5 引入的一个 API，它专门用于执行动画。它会告诉浏览器在下一次重绘之前调用指定的回调函数，从而实现动画效果。它的主要特点包括：

高效：它会根据屏幕刷新率自动调整动画的执行频率，通常是每秒 60 次（60fps），从而避免不必要的重绘，节省 CPU 和 GPU 资源。
同步：它与浏览器的绘制周期同步，确保动画的流畅性。
暂停：当页面不在前台或被最小化时，浏览器会自动暂停动画，节省系统资源。

setTimeout 简介

setTimeout 是一个更通用的 JavaScript 函数，用于在指定的毫秒数后执行一次回调函数。它可以用于创建简单的动画，但有以下缺点：

不精确：由于 JavaScript 是单线程的，setTimeout 的回调函数可能会因为其他任务的执行而延迟。
资源消耗：它不考虑屏幕刷新率，可能会导致动画不流畅或消耗过多的系统资源。
无同步：它与浏览器的绘制周期不同步，可能会导致动画闪烁或不稳定。

性能比较

帧率控制：requestAnimationFrame 会自动调整到最佳帧率，而 setTimeout 需要手动设置时间间隔，容易导致帧率不稳定。
资源利用：requestAnimationFrame 更高效，因为它只在需要重绘时才执行回调，减少了不必要的计算和绘制。
用户体验：由于 requestAnimationFrame 与浏览器的绘制周期同步，动画更流畅，用户体验更好。

应用场景

requestAnimationFrame：
- 复杂的动画效果，如 CSS 动画、Canvas 动画、WebGL 动画等。
- 需要高性能和流畅体验的场景，如游戏、交互式图表等。
- 需要与浏览器绘制周期同步的动画。
setTimeout：
- 简单的动画或需要定时执行的任务，如轮播图、倒计时等。
- 不需要与屏幕刷新率同步的场景。
- 需要在特定时间间隔执行的非动画任务。

实际应用示例

使用 requestAnimationFrame 创建平滑的滚动效果：

function smoothScroll(target) {
    let start = window.pageYOffset;
    let time = 0;
    const duration = 1000;
    const end = target.getBoundingClientRect().top + start;

    function step() {
        time += 1000 / 60;
        let progress = time / duration;
        if (progress > 1) progress = 1;
        window.scrollTo(0, start + (end - start) * easeInOutQuad(progress));
        if (progress < 1) requestAnimationFrame(step);
    }

    requestAnimationFrame(step);
}

使用 setTimeout 创建简单的轮播图：

let slideIndex = 0;
showSlides();

function showSlides() {
    let slides = document.getElementsByClassName("mySlides");
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 2000); // 每2秒切换一次
}

结论

在选择 requestAnimationFrame 或 setTimeout 时，需要考虑动画的复杂度、性能需求以及用户体验。requestAnimationFrame 提供了更好的性能和用户体验，特别是在需要高帧率和流畅动画的场景中。而 setTimeout 则适用于简单的定时任务或不需要与屏幕刷新率同步的动画。通过合理选择和使用这些方法，可以大大提升网页的动画效果和用户体验。