requestAnimationFrame

浏览器直接处理dom的速度慢。因为用js修改dom，涉及到js引擎和DOM渲染引擎两个线程。设计到线程间通信，以及页面的回流和重绘。
几万个DOM插入的操作肯定会到来卡顿。所以要分批次渲染。
HTML5提供了一个请求动画的接口requestAnimationFrame

setTimeout：通过设定间隔时间来不断改变图像位置，达到动画效果。因为异步在同步任务之后执行且执行时间和刷新频率不一定一致，所以实际执行时间晚于设定时间，容易出现卡顿、抖动的现象，会引起丢帧。

requestAnimationFrame：优势：
1.由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。
2.节能，在页面被隐藏会最小化未被激活时时，不会执行动画。
3.节流，高频事件中，可保证每个每个刷新间隔只执行一次。

<script>
        window.onload = function () {
            window.requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame;
            var start = null;
            var ele = document.getElementById("antzone");
            var progress = 0;

            function step() {
                progress += 1;
                ele.style.width = progress + "%";
                ele.innerHTML = progress + "%";
                if (progress < 100) {
                    requestAnimationFrame(step);
                }
            }
            document.getElementById("run").addEventListener("click", function () {
                ele.style.width = "1px";
                progress = 0;
                requestAnimationFrame(step);
            }, false);
        }
    </script>

参考资料：
https://www.softwhy.com/article-7199-1.html