requestAnimationFrame性能测试

willwe

已于 2023-07-12 10:30:33 修改

阅读量287

点赞数

文章标签： javascript 前端开发语言

于 2023-07-11 23:13:27 首次发布

本文链接：https://blog.csdn.net/willwe/article/details/131670684

版权

文章通过对比测试展示了requestAnimationFrame在处理drag事件时与不使用时的调用次数差距，强调了requestAnimationFrame能确保在浏览器重绘前调用回调，从而提高性能。同时，解释了requestAnimationFrame与setTimeout、setInterval的区别，并讨论了如何利用它实现节流，特别是在频繁的页面操作中如滚动事件监听器的应用。

摘要由CSDN通过智能技术生成

requestAnimationFrame：每次重绘最多只调用一次回调函数
测试开启/关闭requestAnimationFrame的监听事件调用次数差异：
先说结论：存在约8倍的调用次数差距！

requestAnimationFrame使用与否的次数差距

本次测试代码为drag事件

const source = document.getElementById("draggable");
    let enqueued = false
    let times = 0
    source.addEventListener("drag", (event) => {
    });

    let timeNow = null;
    source.addEventListener("dragstart", (event) => {
        if(!enqueued) {
            timeNow = new Date();
        }
    });    
    const target = document.getElementById("droptarget");
    target.addEventListener("dragover", (event) => {
        // if (!enqueued) {
        //     enqueued = true
        //     requestAnimationFrame(() => {
                // console.log(event);
                console.log(times++);
                // enqueued = false
        //     })
        // }
        event.preventDefault();
    }, false);
        target.addEventListener("drop", (event) => {
        console.log('done');
        console.log(new Date() - timeNow);
    });

不开启requestAnimationFrame，测试drag次数：

请添加图片描述

请添加图片描述
这是未开启requestAnimationFrame的dragstart到drop时间间隔内的 dragover次数，它们次数/时间间隔分别为：0.4997、0.4705、0.4550、0.5110、0.4148。
平均为：0.4761

const source = document.getElementById("draggable");
    let enqueued = false
    let times = 0
    source.addEventListener("drag", (event) => {
    });

    let timeNow = null;
    source.addEventListener("dragstart", (event) => {
        if(!enqueued) {
            timeNow = new Date();
        }
    });    
    const target = document.getElementById("droptarget");
    target.addEventListener("dragover", (event) => {
        if (!enqueued) {
            enqueued = true![请添加图片描述](https://img-blog.csdnimg.cn/96613896661944738b1deb7e85b07796.png)

            requestAnimationFrame(() => {
                console.log(event);
                console.log(times++);
                enqueued = false
            })
        }
        event.preventDefault();
    }, false);
    target.addEventListener("drop", (event) => {
        console.log('done');
        console.log(new Date() - timeNow);
    });

请添加图片描述

加上requestAnimationFrame之后他们的次数/时间间隔为：
0.0597、0.0592、0.0596、0.0581、0.0595
平均为：0.0592

前后差距：0.4761/0.0592约等于8倍的调用次数差距！

requestAnimationFrame与settimeout、setinterval的区别

无论 setInterval()还是 setTimeout()都是不能保证时间精度的。

作为第二个参数的延时 只能保证何时会把代码添加到浏览器的任务队列，不能保证添加到队列就会立即运行。如果队列前面还有其他任务，那么就要等这些任务执行完再执行。简单来讲，这里毫秒延时并不是说何时这些代码会执行，而只是说到时候会把回调加到任务队列。如果添加到队列后，主线程还被其他任务占用，比如正在处理用户操作，那么回调就不会马上执行。

requestAnimationFrame()方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。

它解决了浏览器不知道 JavaScript 动画何时开始的问题，以及最佳间隔是多少的问题。
传给 requestAnimationFrame()的函数实际上可以接收一个参数，此参数是一个 DOMHighRes- TimeStamp 的实例(比如 performance.now()返回的值)，表示下次重绘的时间。这一点非常重要: requestAnimationFrame()实际上把重绘任务安排在了未来一个已知的时间点上，而且通过这个参数告诉了开发者。基于这个参数，就可以更好地决定如何调优动画了。

与 setTimeout()类似，requestAnimationFrame()也返回一个请求 ID，可以用于通过另一个方法 cancelAnimationFrame()来取消重绘任务。

let requestID = window.requestAnimationFrame(() => {
  console.log('Repaint!');
})
window.cancelAnimationFrame(requestID);

requestAnimationFrame如何实现节流

支持这个方法的浏览器实际上会暴露出作为钩子的回调队列。所谓钩子(hook)，就是浏览器在执行下一次重绘之前的一个点。这个回调队列是一个可修改的函数列表，包含应该在重绘之前调用的函数。每次调用 requestAnimationFrame()都会在队列上推入一个回调函数，队列的长度没有限制。

可以保证每次重绘最多只调用一次回调函数。这是一个非常好的节流工具。在频繁执行影响页面外观的代码时(比如滚动事件监听器)，可以利用这个回调队列进行节流。例如上文的代码

但是重绘是非常频繁的操作，所以加上requestAnimationFrame之后还不算真正的节流，需要配合定时器

 let enabled = true;
 function expensiveOperation() {
      console.log('Invoked at', Date.now());
 }
 window.addEventListener('scroll', () => {
 if (enabled) {
     enabled = false;
     window.requestAnimationFrame(expensiveOperation);
     window.setTimeout(() => enabled = true, 50);
 }
});