requestAnimationFrame的使用

window.requestAnimationFrame()方法就是告诉浏览器，你想在浏览器里执行一个动画或者执行浏览器通过调用一个特定函数来更新动画的请求。该方法接收一个函数名作为参数。这样我们就可以不适用定时器来产生动画效果。这个方法会比定时器更加流畅。

大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。
　　而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行
　　requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

下面是实际应用：
HTML代码

CSS代码

.box {
    width: 800px;
    height: 600px;
    border: 1px solid;
    position: relative;
}
.ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    position: absolute;
}

JS代码

var ball = document.querySelector(".ball");     
    var i = 0;
    function move() {           
        if (i == 750) {
            i =0;
        }else {
            i += 3;
        }
        //console.log(i)
        ball.style.cssText = "left: "+ i +"px";         
        requestAnimationFrame (move);
    }       
    move();

这样，小球就能像使用定时器一样运动起来了。