window.requestAnimationFrame 兼容性封装，调节重新渲染，提高网页性能_html/css_WEB-ITnose

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel// MIT license(function() {    var lastTime = 0;    var vendors = ['ms', 'moz', 'webkit', 'o'];    for(var x = 0; x   

  
比较常用的使用场景：调节重新渲染，提高网页性能。（将某些代码放到下一次重新渲染时执行。）
  
（以下场景来自：http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）
  
场景1：
  
function doubleHeight(element) {  var currentHeight = element.clientHeight;  element.style.height = (currentHeight * 2) + 'px';}elements.forEach(doubleHeight);
  
上面的代码使用循环操作，将每个元素的高度都增加一倍。可是，每次循环都是，读操作后面跟着一个写操作。这会在短时间内触发大量的重新渲染，显然对于网页性能很不利。
  
我们可以使用window.requestAnimationFrame()，让读操作和写操作分离，把所有的写操作放到下一次重新渲染。
  
function doubleHeight(element) {  var currentHeight = element.clientHeight;  window.requestAnimationFrame(function () {    element.style.height = (currentHeight * 2) + 'px';  });}elements.forEach(doubleHeight);
  

  
场景2：
  
页面滚动事件（scroll）的监听函数，就很适合用 window.requestAnimationFrame() ，推迟到下一次重新渲染。
  
$(window).on('scroll', function() {   window.requestAnimationFrame(scrollHandler);});
  

  
场景3：
  
最适用的场合还是网页动画。下面是一个旋转动画的例子，元素每一帧旋转1度。
  
var rAF = window.requestAnimationFrame;var degrees = 0;function update() {  div.style.transform = "rotate(" + degrees + "deg)";  console.log('updated to degrees ' + degrees);  degrees = degrees + 1;  rAF(update);}rAF(update);