关于 setTimeout 的那些冷知识

Question

为什么 setTimeout 有最小时延 4ms ?

首先：setTimeout 规范由 whatwg 来维护

规范中存在这样两条：

• 如果设置的 timeout 小于 0，则设置为 0
• 如果嵌套的层级超过了 5 层，并且 timeout 小于 4ms，则设置 timeout 为 4ms。

而在浏览器实现端，做了调整，对于 chrome

• 第一条规则： timeout 小于 1，则设置为 1. 即 finalTime = Math.max(1, setTime)；
• 第二条规则： 规范要求是>5，而实现是>=5

为什么最小值是 1，不是 0？

• 如果浏览器允许 0ms，会导致 JavaScript 引擎过度循环，也就是说如果浏览器架构是单进程的，那么可能网站很容易无响应。因为浏览器本身也是建立在 event loop 之上的，如果速度很慢的 JavaScript engine 通过 0ms timer 不断安排唤醒系统，那么 event loop 就会被阻塞。

为什么>=5 时，最小是 4

• it is a long story，具体就是当小于 4 时，会造成 CPU 持续运转，无法进入睡眠模式；

各个浏览器都未完全按规范实现，但主流浏览器基本与 chrome 实现相似。

setTimeout 与 requestAnimationFrame 区别

requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；

• 在离屏情况下，当 tab 已经被切换（chrome 针对这个有优化），或则动画已经被滚动到非可视区，setTimeout 与 setinterval 仍然会计算更新动画，而 requestAnimationFrame 就会停止（懒惰优化策略）；
• setTimeout 与 setinterval 只会根据他们的计算，认为需要更新动画，就去更新；而没有和屏幕本身的刷新同步；而 requestAnimationFrame 的动画是和屏幕整体刷新同步的；这种和屏幕不同步的更新，会导致不必要的计算，没有和侦更新同步的，会被丢弃，会更多的消耗 cpu；
• 当你的网页需要在一些不同的设备上运行时（fps 不同），setTimeout 与 setinterval 设置更新评率需要做更多的适配；
• 页面多动画时，setTimeout 的处理会比较复杂。