javascript单线程的理解
|
|
摘要：大家都知道javascript是单线程执行的，但是又可以通过setTimeout或者setInterval定时执行一个方法，通过Ajax可以在向服务器端发送请求没有收到回应可以继续执行主逻辑。这些是如何做到的呢，下面就来探讨下。先看如下一段代码： 以上代码得执行结果为hello...
大家都知道javascript是单线程执行的，但是又可以通过setTimeout或者setInterval定时执行一个方法，通过Ajax可以在向服务器端发送请求没有收到回应可以继续执行主逻辑。这些是如何做到的呢，下面就来探讨下。
先看如下一段代码：
<html>
<body>
<script type="text/javascript">
function printHello()
{
console.time("hello");
}
function printHello1()
{
console.timeEnd("hello");
}
setTimeout(printHello,1000);
setTimeout(printHello1,5000);
function wait(time)
{
var now = Date.now();
while(Date.now() - now < time)
{
}
}
wait(5000);
</script>
</body>
</html>
以上代码得执行结果为
hello: 0.124ms
从代码可以看出，printHello 与printHello1几乎是同时执行的。如果对于多线程模型，执行间隔应该是4000ms。
以上的原因是setTimeout只是将事件到时间点压入队列，而不是立即执行。具体何时执行还要看浏览器的空闲程度。
其实虽然javascript是单线程的，但是浏览器是多线程的，典型的浏览器有如下线程：
- javascript引擎线程
- 界面渲染线程
- 浏览器事件触发线程
- Http请求线程
下图为网上摘录而来，可很好反应浏览器的线程模型。
对上图做一下说明。GUI渲染线程与javascript执行引擎是互斥的，当javascript引擎线程执行时，渲染线程就暂停。
使用setTimeout 或者click相当于向javascript执行队列中添加一个任务，javascript执行引擎依次执行。
http请求线程为短时的，想服务端发送完http请求后就结束了。
javascript单线程其实指的是javascript引擎线程单线程地处理它的事件队列，但是很多浏览器事件都是异步的，
比如鼠标点击事件，setTimeout，Ajax回调事件，当这些事件发生时，浏览器会将这些事件放入执行队列，待浏览器空闲时再执行。
另外，值得一提的是，ajax调用确实是异步的，浏览器会启动一个http请求线程来想服务端发送请求，如果设置了回调事件，会根据服务端返回状态将回调事件放入事件队列。