[Violation] 'requestAnimationFrame' handler took 64ms

这个警告是因为requestAnimationFrame回调函数执行时间过长，超过了16.67ms（即60fps的每帧时间），可能会导致页面卡顿。解决这个问题的方法有以下几种：

1.优化回调函数的代码，尽量减少执行时间，避免执行耗时操作。

2.将回调函数拆分成多个小函数，分别执行，避免单个函数执行时间过长。

3.使用Web Worker将回调函数放在另一个线程中执行，避免阻塞主线程。

4.使用requestIdleCallback代替requestAnimationFrame，requestIdleCallback会在浏览器空闲时执行回调函数，避免阻塞主线程。

下面是一个使用requestIdleCallback的例子：

function myCallback(deadline) {
  while (deadline.timeRemaining() > 0) {
    // 执行一些任务
  }
  if (还有任务未完成) {
    requestIdleCallback(myCallback);
  }
}

requestIdleCallback(myCallback);

相关问题

[Violation]'requestAnimationFrame' handler took 1155ms

这个警告是浏览器给出的性能警告，提示你的requestAnimationFrame回调函数执行时间过长，导致界面卡顿或者动画不流畅。在大部分情况下，requestAnimationFrame回调函数的执行应该是在16ms内完成的，也就是每秒60帧的速率。

如果你收到了这个警告，可以考虑优化你的代码，减少回调函数的执行时间。一种常见的优化方法是将回调函数中的计算和操作尽可能移到函数外部，避免在每次回调中重复计算相同的内容；另外，也可以考虑使用Web Worker，将计算和操作转移到另一个线程中执行，避免阻塞主线程。

总之，尽可能减少requestAnimationFrame回调函数的执行时间是保持动画流畅性的重要因素之一。

[Violation] 'requestAnimationFrame' handler took 207ms

回答: 当有多个requestAnimationFrame一起执行时，它们会按照每个回调函数注册的顺序依次执行。在每一帧中，浏览器会调用每个回调函数，并传递一个时间戳作为参数。这个时间戳表示当前帧开始的时间，单位为毫秒。每个回调函数都会接收到相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。\[3\]

在你提供的例子中，当同时执行test1和test2时，它们会交替执行。首先，test1会被调用并打印出相应的时间戳，然后test2会被调用并打印出相应的时间戳。然后，浏览器会继续按照这个顺序循环调用test1和test2，每次都传递一个新的时间戳。

在第二个例子中，当页面加载完成后，test函数会被注册为requestAnimationFrame的回调函数。每一帧中，test函数会被调用并打印出相应的时间戳。这个过程会一直重复，直到页面被关闭或者停止调用requestAnimationFrame。

根据你提供的错误信息，"\[Violation\] 'requestAnimationFrame' handler took 207ms"，这表示在某一帧中，requestAnimationFrame的回调函数执行时间超过了浏览器的限制，导致了违规行为。这可能是因为回调函数的执行时间过长，超过了浏览器的预定时间限制。为了避免这种情况，你可以优化回调函数的代码，减少执行时间，或者将一些计算工作分散到多个帧中进行处理。
#### 引用[.reference_title]
- *1* *2* *3* [requestAnimationFrame](https://blog.csdn.net/zxl1990_ok/article/details/121257360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]