我们为哪些浏览器使用 Paul Irish 的 requestAnimationFrame shim？答案

【问题标题】：For which browsers are we using Paul Irish's requestAnimationFrame shim?我们为哪些浏览器使用 Paul Irish 的 requestAnimationFrame shim？
【发布时间】：2014-01-17 03:31:13
【问题描述】：

Paul Irish 有一个名为 requestAnimationFrame for Smart Animating 的帖子。现在保罗是个聪明人——我只是想了解这个想法的应用范围。

他说要做 HTML5 动画 - 你应该像这样使用 requestAnimationFrame shim：

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

这是可以理解的。 We can apply this in a JSFiddle like this 结果相当不错。

但是if I rip out the shim layer function，那么在 Chrome 31 和 Firefox 24 中它可以正常工作。

所以如果我查看compatibility for the RequestAnimationFrame function - 看起来浏览器已经拥有这个功能很长时间了。

我的问题是 - 我们为哪些浏览器使用 Paul Irish 的 requestAnimationFrame shim？ 你可以把它撕下来，它仍然可以工作，而且看起来浏览器已经使用了很长时间。

【问题讨论】：

对于您刚刚链接到的列表中的那些。特别是对于 IE9。
切勿使用提供的垫片。它只是延迟了 1000/60 的执行。 raf 的唯一目的是避免过多的 dom 更新。最好使用真正的 raf polyfill，它会为下一帧执行安排回调。

标签： javascript html requestanimationframe

【解决方案1】：

你需要 IE8、IE9、Android 浏览器的 polyfill，以及一堆你必须做出判断的旧东西。

感谢 caniuse.com，这是当前对 rAF 的支持：

任何在角落里有黄旗的东西都使用前缀，所以它需要垫片。任何红色都需要 setTimeout 后备。

但是，为了达到你的核心点……很快，是的，很快，polyfill 会变得更小。希望不久之后我们可以杀死它并直接使用 rAF。

【讨论】：

【解决方案2】：

如果您想支持旧版浏览器，恐怕需要 polyfill/shim。

正如您所指出的，它适用于不带前缀的最新 Firefox 和 Chrome。 Firefox 也有一个 new policy not to prefix 任何未来的技术，所以这也许也是一件好事，还有一个 proposal 可以为 Chrome 做同样的事情。

但是，如果您运行的是旧版浏览器（并且有一大群用户会这样做），那么 polyfill 是必要的。

Source

在这里，我们看到 IE9 在顶部，然后是 IE8、10，然后是旧版 Chrome（尽管这包括去年解释 Chrome 部分以及 IE9 与 IE10 的整个年份）。不同的地区可能会有所不同，因此请测试您认为与您的申请相关的地理区域。

【讨论】：