从setTimeout分析浏览器线程
从setTimeout分析浏览器线程
从setTimeout分析浏览器线程
[toc] 今天接到阿里的面试电话，面试官很和善，聊聊天的形式不知不觉就是一个小时。本人接触前端不深，面试的时候问的几个问题也让我发现自身学习过程中思考太少，其中一个就是问到了setTimeout的工作机理，当时简单讲了讲我自己的想法，面试官也指出了其中的问题，现查阅资料重新整理记录。
1. setTimeout的表象
setTimeout的定义很简单，教科书上说，setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。回想平时的开发，setTimeout多用于定时器，轮播图，动画效果，自动滚动等。
1.1 案例一
var startTime = new Date();
setTimeout(function () {
console.log(new Date() - startTime);
}, 100);答案取决于同步执行的js需要占用的时间，MAX(同步执行的时间, 100)
1.2 案例二
setTimeout(function () {
func1();
}, 0)
func2();此处func2先执行，func1后执行
1.3 案例三
setTimeout(function () {
func1（）
}, 0)与
setTimeout(function () {
func1（）
})0秒延迟，此回调将会放到一个能立即执行的时段进行触发。javascript代码大体上是自顶向下的，但中间穿插着有关DOM渲染，事件回应等异步代码，他们将组成一个队列，零秒延迟将会实现插队操作。不写第二个参数，浏览器自动配置时间，在IE，FireFox中，第一次配可能给个很大的数字，100ms上下，往后会缩小到最小时间间隔，Safari，chrome，opera则多为10ms上下。
2. 浏览器内核线程分析
初学JavaScript时出现过一个误区：JavaScript引擎是多线程的，定时器回调函数是异步执行的。 事实上，JavaScript引擎是单线程的，其实单线程也有单线程的好处，可以简化很多问题。 想说明白js的运行机制，不得不提到浏览器内核线程。通常来说，一个浏览器内核的实现至少有三个常驻线程：javascript引擎线程、GUI渲染线程、浏览器事件触发线程。此外还有些执行完即终止的线程，如Http请求线程，这些异步线程会产生不同的异步事件,下图阐明单线程JavaScript引擎与其他线程的通信。
由图可看出,浏览器中的JavaScript引擎基于事件驱动，由于是单线程，所有事件在队列中排队等待执行。 上图 t1 - t2 … tn 表示不同时间点，t1时刻其他线程的工作状态为： 【GUI渲染线程】 该线程负责渲染浏览器界面的HTML元素，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执行。该线程与JavaScript引擎线程互斥，因为JavaScript脚本是可操纵DOM元素的，在修改这些元素属性同时渲染界面，那么渲染线程前后获得的元素数据就可能不一致。在JavaScript引擎运行脚本期间，浏览器渲染线程处于挂起状态。所以在脚本中执行对界面的更新操作，如添加、删除结点或改变结点的外观等更新并不会立即体现出来，这些操作将保存在一个队列中，待JavaScript引擎空闲时才有机会渲染出来。 【事件触发线程】 JavaScript脚本的执行不影响html元素事件的触发，在t1时间段内，用户点击鼠标被浏览器事件触发线程捕捉后形成一个鼠标点击事件，由其它线程异步传到任务队列尾。 【定时触发线程】 浏览器模型定时计数器并不是由JavaScript引擎计数，因为单线程的JavaScript引擎处于阻塞状态无法计时，必须依赖外部来计时并触发，所以队列中的定时事件也是异步事件。
案例1 详见后面的案例分析 setTimeout与setInterval
setTimeout(function() {
/* 代码块... */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* 代码块... */
}, 10);两段代码看似效果相同，其实不然，第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout定时，理论时间间隔>=10ms；第二段自setInterval设置定时后，定时触发线程会不断的每隔10ms产生异步定时事件并放到任务队列尾，理论时间间隔<=10ms
案例2 ajax异步请求是否真异步
XMLHttpRequest请求在连接后是异步的，请求是由浏览器新开一个线程，当请求状态变更时，若设置回调函数，异步线程产生状态变更事件放到JavaScript引擎的处理队列中以单线程等待处理
3. setTimeout()与setInterval()运行实例分析
3.1 setTimeout() 案例1
【代码1】
console.log(1)
setTimeout(function () {console.log('a')}, 10);
setTimeout(function () {console.log('b')}, 0);
var sum = 0;
for (var i = 0; i < 1000000; i ++) {
sum += i;
}
console.log(sum);
setTimeout(function () {console.log('c');}, 0);【结果1】
【流程1】
3.2 setTimeout() 案例2
【代码2】: for循环规模缩小
console.log(1)
setTimeout(function () {console.log('a')}, 10);
setTimeout(function () {console.log('b')}, 0);
var sum = 0;
for (var i = 0; i < 100000; i ++) {
sum += i;
}
console.log(sum);
setTimeout(function () {console.log('c');}, 0);【结果2】
【流程2】
3.3 setTimeout() 结果分析
两段代码的区别在于for循环执行的时间不同，第一段代码的for循环执行时间大于10ms，所以console.log(‘a’)先被插入任务队列，等for循环执行结束后，console.log(‘c’)才被插入任务队列。第二段代码的for循环执行时间小于10ms，所以console.log(‘c’)先被插入任务队列。
3.4 setInterval()
setInterval()的执行方式与setTimeout()有不同。假如执行setInterval(fn, 10)，则每隔10ms，定时器的事件就会被触发。与setTimeout()相同的是，如果当前没有同步代码在执行（JavaScript引擎空闲），则定时器对应的方法fn会被立即执行，否则，fn就会被加入到任务队列中。由于定时器的事件是每隔10ms就触发一次，有可能某一次事件触发的时候，上一次事件的处理方法fn还没有机会得到执行，仍然在等待队列中，这个时候，这个新的定时器事件就被丢弃，继续开始下一次计时。需要注意的是，由于JavaScript引擎这种单线程异步的执行方式，有可能两次fn的实际执行时间间隔小于设定的时间间隔。比如上一个定时器事件的处理方法触发之后，等待了5ms才获得被执行的机会。而第二个定时器事件的处理方法被触发之后，马上就被执行了。那么这两者之间的时间间隔实际上只有5ms。因此，setInterval()并不适合实现精确的按固定间隔的调度操作。 【代码】
console.log(1)
var interval = setInterval(function () {
var date = new Date();
console.log(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds());
}, 10);
var sum = 0;
for (var i = 0; i < 1000000; i ++) {
sum += i;
}
console.log(2);
// 清除定时器
setTimeout(function () {
clearInterval(interval);
}, 100);【结果】
可以看出，setInterval()前两次的间隔时间只有4ms。因为setInterval()第一次被触发后，里面的方法并没有马上被执行，而是等待同步代码执行结束后才被执行，这个过程用了6ms。所以当第一次方法执行过后4ms，第二次方法也被执行了。从setInterval()第二次被触发开始，后面几次的执行都没有被阻塞，所以间隔时间都在11ms左右。
3.5 setTimeout()与setInterval()案例总结
总的来说，setTimeout()和setInterval()都不能满足精确的时间间隔。假如设定的时间间隔为10ms，则setTimeout(fn, 10)中的fn执行的时间间隔可能大于10ms，而setInterval(fn, 10)中fn执行的时间间隔可能小于10ms。
4. 利用setTimeout实现伪多线程优化交互
javascript是单线程的，特点就是容易出现阻塞。如果一段程序处理时间很长，很容易导致整个页面hold住。 setTimeout一个很关键的用法就是分片，如果一段程序过大，我们可以拆分成若干细小的块。例如上面的情况，我们将那一段复杂的逻辑拆分处理，分片塞入队列。这样即使在复杂程序没有处理完时，我们操作页面，也是能得到即使响应的。其实就是将交互插入到了复杂程序中执行。
Concurrent.Thread.create(function(){
for (var i = 0;i<1000000;i++) {
console.log(i);
};
});
$('#test').click(function () {
alert(1);
});对复杂代码段使用setTimeout分片执行实现了交互的优化
5. 真正的多线程：HTML5 Web Workers
在HTML4中，js创建的程序都是单线程的，Web Workers 是在HTML5中新增的，用来在web应用程序中实现后台处理的一种技术。使用这个API可以非常容易的创建在后台运行的线程：
var worker = new Worker('*.js');
// 后台线程是不能访问页面或窗口对象的
// 但可通过发送消息和接受消息与后台线程传递数据
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};