setTimeout和requestAnimationFrame在遇到JS耗时过长时，行为上的区别

Question

面试遇到的一个问题，感觉这块知识点掌握的不好。
已知浏览器是按帧进行绘制的，但本人在下面三个问题上存疑，希望能有大佬能解答

1. 当JS耗时过长，setTimeout和requestAnimationFrame，都会被阻塞吗？
2. setTimeout和requestAnimationFrame 遇到耗时过长的JS时，在行为上有什么区别，或者说都会发生什么行为。
3. requestAnimationFrame 一定每帧都会执行吗？极端情况下是降频还是什么？

Answer 1

1: js引擎与GUI引擎互斥，JS引擎一直在工作的话 GUI引擎是没法工作的
2：耗时过长的JS 他们是没区别的 都没有空执行
3：requestAnimationFrame 是每帧渲染之前 执行的。。如果你浏览器不渲染 是卡帧或者卡死requestAnimationFrame 肯定不会执行 （在后台标签页或者隐藏的<iframe> 里时 也会被暂停）
然后你在 requestAnimationFrame 里面做了太多事情 会导致你降频的 比如1s 刷新60次 变成1s刷新30次

看了 你的问题 我感觉那个面试官是不是想问 requestIdleCallback啊
requestAnimationFrame 是每帧渲染之前 执行 你的帧不渲染 肯定不执行了
requestIdleCallback 渲染屏幕之后执行 并且浏览器现在比较空

Answer 2

1.大体来说是会的，毕竟js执行和渲染总是互斥的，js执行又是按照事件循环的。死循环卡住浏览器也是存在的嘛
2.主要是setTimeout和rAF触发时机不太一样，宏观上看可能没啥特殊的。微观的就是setTimeout因为在事件循环里面地位比较低，存在一些这样的问题：https://developer.mozilla.org...
3.逻辑上应该是。要么js执行卡住渲染，要么渲染delay脚本。