[Violation] 'requestAnimationFrame' handler took 207ms
时间: 2023-08-17 15:12:12 浏览: 141
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
回答: 当有多个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 ]
阅读全文