zoukankan      html  css  js  c++  java
  • JS是单线程的吗?

    Javascript是单线程的深入分析

    首先一个引子:为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?

    先看例子1:

    1 function foo() {
    2     console.log( 'first' );
    3     setTimeout( ( function(){ console.log( 'second' ); } ), 5);
    4 }
    5 for (var i = 0; i < 1000000; i++) {
    6     foo();
    7 }

    执行结果如下

    先显示出10000个first,再显示出10000个second

    Javascript是单线程的

    因为JS运行在浏览器中,是单线程的,每个window一个JS线程,既然是单线程的,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码。

    而浏览器是事件驱动的(Event driven),浏览器中很多行为是异步(Asynchronized)的,会创建事件并放入执行队列中。javascript引擎是单线程处理它的任务队列,你可以理解成就是普通函数和回调函数构成的队列。当异步事件发生时,如mouse click, a timer firing, or an XMLHttpRequest completing(鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调触发等),将他们放入执行队列等待当前代码执行完成。

    异步事件驱动

    前面已经提到浏览器是事件驱动的(Event driven),浏览器中很多行为是异步(Asynchronized)的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、XMLHttpRequest完成回调等。

    当一个异步事件发生的时候,它就进入事件队列。

    浏览器有一个内部大消息循环,Event Loop(事件循环),会轮询大的事件队列并处理事件。例如,浏览器当前正在忙于处理onclick事件,这时另外一个事件发生了(如:window onSize),这个异步事件就被放入事件队列等待处理,只有前面的处理完毕了,空闲了才会执行这个事件。setTimeout也是一样,当调用的时候,js引擎会启动定时器timer,大约xxms以后执行xxx,当定时器时间到,就把该事件放到主事件队列等待处理(浏览器不忙的时候才会真正执行)。

    浏览器不是单线程的

    虽然JS运行在浏览器中,是单线程的,每个window一个JS线程,但浏览器不是单线程的,例如Webkit或是Gecko引擎,都可能有如下线程:

    • javascript引擎线程
    • 界面渲染线程
    • 浏览器事件触发线程
    • Http请求线程

    很多童鞋搞不清,如果js是单线程的,那么谁去轮询大的Event loop事件队列?答案是浏览器会有单独的线程去处理这个队列。

    Ajax异步请求是否真的异步?

    很多童鞋搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步? 
    其实请求确实是异步的,这请求是由浏览器新开一个线程请求(见前面的浏览器多线程)。当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的事件处理队列中等待处理。当浏览器空闲的时候出队列任务被处理,JavaScript引擎始终是单线程运行回调函数。javascript引擎确实是单线程处理它的任务队列,能理解成就是普通函数和回调函数构成的队列。

    总结一下,Ajax请求确实是异步的,这请求是由浏览器新开一个线程请求,事件回调的时候是放入Event loop单线程事件队列等候处理。

    setTimeout(func, 0)为什么有时候有用?

    写js多的童鞋可能发现,有时候加一个setTimeout(func, 0)非常有用,为什么?难道是模拟多线程吗?错!前面已经说过了,javascript是JS运行在浏览器中,是单线程的,每个window一个JS线程,既然是单线程的,setTimeout(func, 0)神奇在哪儿?那就是告诉js引擎,在0ms以后把func放到主事件队列中,等待当前的代码执行完毕再执行,注意:重点是改变了代码流程,把func的执行放到了等待当前的代码执行完毕再执行。这就是它的神奇之处了。它的用处有三个:

    • 让浏览器渲染当前的变化(很多浏览器UI render和js执行是放在一个线程中,线程阻塞会导致界面无法更新渲染)
    • 重新评估”script is running too long”警告
    • 改变执行顺序

    非阻塞js的实现(non-blocking javascript)

    js在浏览器中需要被下载、解释并执行这三步。在html body标签中的script都是阻塞的。也就是说,顺序下载、解释、执行。

    尽管Chrome可以实现多线程并行下载外部资源,例如:script file、image、frame等(css比较复杂,在IE中不阻塞下载,但Firefox阻塞下载)。

    但是,由于js是单线程的,所以尽管浏览器可以并发加快js的下载,但必须依次执行(因为是单线程的)。所以chrome中image图片资源是可以并发下载的,但外部js文件并发下载没有多大意义。

    要实现非阻塞js(non-blocking javascript)有两个方法:1. html5 2. 动态加载js

    1. html5

    defer

    <script type="text/javascript" defer src="foo.js"></script>

    async

    <script type="text/javascript" async src="foo.js"></script>

    2. 动态加载js

    阻塞和非阻塞关注的是程序在等待调用结果(消息,返回值)时的状态.

    (The End)
  • 相关阅读:
    iframe跨域
    changePage() 页面跳转
    APACHE启动失败是SYSTEM对apache目录没权限导致
    git使用中出现的错误
    python面试总结
    python面试30-40题
    python面试1-30题
    购物车的基本流程
    vue的基础知识
    三大框架的对比
  • 原文地址:https://www.cnblogs.com/oneplace/p/5513720.html
Copyright © 2011-2022 走看看