标签：存在 gpu 执行 时间 cli dom操作 blog 刷新 频率
setTimeout，setInterval并不是多线程，只是浏览器提供的一个定时的事件触发器，让js代码在浏览器中延时执行。
setTimeout：延时delay毫秒之后，直接将将定时器任务加入事件队列，只加一次。
setInerval：每延时delay毫秒之后，浏览器尝试将定时器任务加入事件队列。如果事件队列中已经存在该timer未执行的消息，则该回调会被丢弃，不再添加。否则，会出现多个回调同时在队列等待执行的情况。
定时器只负责到时往队列中加入消息，具体执行时间要看队列中的消息排队情况。所以setTimeout(fun, 0)并不意味着立即执行。
事件消息无论何时添加，总是优先于定时器消息执行。
$(‘#ele1‘).on(‘click‘, function () { var oldTime = new Date().getTime(); while (new Date().getTime() - oldTime < 2000) { } console.log(‘clickEvent1‘); }); $(‘#ele2‘).on(‘click‘, function () { var oldTime = new Date().getTime(); while (new Date().getTime() - oldTime < 2000) { } console.log(‘clickEvent2‘); }); var timer = setTimeout(function () { console.log(‘timerEvent‘); }, 0) $(‘#ele1‘).click(); $(‘#ele2‘).click(); $(‘#ele1‘).click(); //输出clickEvent1,clickEvent2,clickEvent1,timerEvent
如果执行时间长，setInterval会导致两次回调间没有delay，这时可以采用链式调用setTimeout来取代setInterval。
function timer(fn,delay){ var s=setTimeout(function(){ fn(); timer(fn,delay); //回调执行完重新触发定时器，避免了连续的队列延迟产生的叠加 },delay) }
或
var timer=setTimeout(function () { //业务逻辑 timer=setTimeout(arguments.callee, interval); }, interval) //为了在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔，也保证了在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。
另外：建议使用requestAnimationFrame(RAF)或者直接采用CSS来写页面动画，不要使用定时器。requestAnimationFrame比起setTimeout、setInterval的优势主要有两点：
1.requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量
标签：存在 gpu 执行 时间 cli dom操作 blog 刷新 频率
原文地址：http://www.cnblogs.com/kevin2chen/p/6415750.html
