如何确定在JavaScriptanimation循环中使用的最佳“帧率”（setInterval延迟）？
当写JavaScriptanimation时，你当然要用setInterval（或重复的setTimeout）来做一个循环。 但是，在setInterval / setTimeout调用中使用最好的延迟是什么？
在.animate（）函数的jQuery API页面中 ，用户“fbogner”说：
只要有人感兴趣：animation是使用setInterval“呈现”，时间为13ms。 这相当快！ Chrome可能的最快时间间隔约为10ms。 所有其他浏览器在20-30ms左右“采样”。
任何想法如何jQuery决定使用这个具体的数字？
开始赏金。 我希望有人知道铬或火狐后面的源代码可以提供一些可能支持特定帧率的决定的硬性事实。 或者可能是一个animation（或框架）列表及其延迟。 我相信这是一个有趣的机会做一些研究。
有趣的 – 我只是花时间看看谷歌的吃豆人来源，看看他们做了什么。 他们build立了一系列可能的FPS（90,45,30），从第一个开始，然后每帧检查帧的“缓慢”（帧的数量超过了分配的时间）。 如果慢度超过50毫秒20次，帧速率会下降到列表中的下一个（90-> 45,45 – > 30）。 看起来，帧率从来没有提高，大概是因为游戏是如此短暂，以至于编写代码是不值得的。
哦，setInterval延迟当然设置为1000 /帧率。 他们确实使用setInterval而不是重复的setTimeouts。
我认为这个dynamic帧率function是相当整洁的！
我敢说，很大一部分networking用户正在使用60Hz刷新率的显示器，这意味着每16.66毫秒就会有一帧显示。 因此，要使显示器成为瓶颈，您需要生成比16.66ms更快的帧。
有两个理由你会select一个值13ms。 首先，浏览器需要一点时间来重新绘制屏幕（以我的经验，从不less于1ms）。 比如说，每15ms更新一次，这个数字非常有趣 – Windows上的标准定时器分辨率是15ms（参见John Resig的博客文章 ）。 我怀疑在各种浏览器/操作系统上，写得很好的15msanimation看起来非常接近。
FWIW，fbogner显然是非Chrome浏览器每20-30ms触发一次setInterval。 我写了一个testing来测量setInterval射击的速度，并得到了这些数字：
- Chrome – 4ms
- Firefox 3.5 – 15ms
- IE6 – 15ms
- IE8 – 15ms
伪代码是这样的：
FPS_WANTED = 25 (just a number, it can be changed while executing, or it can be constant) TIME_OF_DRAWING = 1000/FPS_WANTED (this is in milliseconds, I believe it is accurate enough) ( should be updated when FPS_WANTED changes) UntilTheUserLeavesTheDrawingApplication() { time1 = getTime(); doAnimation(); time2 = getTime(); animationTime = time2-time1; if (animationTime > TIME_OF_DRAWING) { [the FPS_WANTED cannot be reached] You can: 1. Decrease the number of FPS to see if a lower framerate can be achieved 2. Do nothing because you want to get all you can from the CPU } else { [the FPS can be reached - you can decide to] 1. wait(TIME_OF_DRAWING-animationTime) - to keep a constant framerate of FPS_WANTED 2. increase framerate if you want 3. Do nothing because you want to get all you can from the CPU } }
当然可以有这种变化，但这是在animation的任何情况下有效的基本algorithm。
在为animation制作循环时，最好在循环速度和需要完成多less工作之间find平衡点。
例如，如果您想在一秒钟内在页面上滑动一个div，所以它是一个很好的效果和及时的。 你会跳过坐标，并有一个相当快的循环时间，所以效果是明显的，但不会跳动。
所以这是一个试验和错误的事情（通过不得不考虑工作，时间和浏览器的能力）。 所以它不仅在一个浏览器上看起来不错。
fbogner告诉我的号码已经过testing。 浏览器在一定程度上节streamjs-activity每次都可用。
如果您的JavaScript可能每5毫秒运行一次，浏览器运行时将会有更less的CPU时间刷新渲染或对用户input（点击）作出反应，因为javascript执行会阻止浏览器。
我认为chrome-devs允许你以比其他浏览器更短的时间间隔运行你的javascript，因为它们的V8-Javascript-Engine编译JavaScript，因此运行速度更快，浏览器只要解释js-code 。
但是，引擎不仅要快得多，而且允许开发人员进行更短的时间间隔testing，这是最短的时间间隔，允许较短的时间间隔，并且不会阻塞浏览器
不知道jQuery的间隔时间的原因，因为13ms转换为80fps这是非常快的。 在电影中使用的“标准”fps是25fps，速度足够快，人眼不会察觉到任何抖动。 25fps转换为40ms，所以回答你的问题：低于40ms的任何东西都足够用于animation。
