资讯专栏INFORMATION COLUMN

js 单线程和它的异步执行机制

xcc3641 / 582人阅读

摘要:单线程定义单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。单线程就是进程只有一个线程。

单线程定义
    单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。
    单线程就是进程只有一个线程。
    多线程就是进程有多个线程。
Javascript 单线程
    其实这里Javascript的单线程运行机制和上面单线程定义是一个执行流程,它只有一个主线任务,比如:前面有一条河中间只有一根木棍,想要过河只能从一边按顺序走,单个单个的执行,如果从两头一起过河Javascript的单线程就会造成阻塞,这里只是举例了一个简单的解释示例,虽然JavaScript是单线程的且效率太低只能按部就班的一步步走,可是浏览器内部不是单线程的。你的一些I/O操作、定时器的计时和事件监听(click, keydown...)等都是由浏览器提供的其他线程来完成的
任务队列和事件循环

调用栈

   代码在运行过程中,会有一个叫做调用栈的概念。调用栈是一种栈结构,它用来存储计算机程序执行时候其活跃子程序的信息。(比如什么函数正在执行,什么函数正在被这个函数调用等等信息)

代码示例

   function expale(a) {
       return a+1
   }
   console.log(expale(1))

上面的例子我们创建了一个简单的函数,然后利用console打印并执行了这个函数,在console这里执行的时候已经形成了一个栈,我们也可以比喻成一个比较大的盒子,console.log(expale(1))就是底部的一个盒子,然后expale(1)会变成另一个盒子落在console.log(expale(1))上面这就形成了栈,其实就是上面所说到的存储计算机程序执行时候其活跃子程序的信息。最后只想说因为它是单线程

任务队列

   宏任务队列:
               setTimeout
               setInterval
               setImmediate
               I/O 
               UI rendering (浏览器渲染)
   微任务队列:
               process.nextTick(下一个事件轮询的时间点上执行)
               Promise
               Object.observer
               MutationObserver(监视 DOM 变动的接口)
         
   console.log("11221121");
   // 微任务
   Promise.resolve().then(() => {
       console.log("p 1");
   });
   
   // 宏任务
   setTimeout(() => {
       console.log("setTimeout");
   }, 0);

等宏任务执行完(全局执行完)就会开始执行整个微任务队列

事件循环

    如上图所示stack存储着要执行的任务,下面黄色的onclick函数就是消息队列,一旦有异步响应就会被推入到该队列中。比如:用户的点击事件,setTimeout等等,然后再进入到stack栈中,然后再有任务进入消息队列,再执行这样就形成了事件循环
    
    单线程从任务队列中读取任务是不断循环的,每次栈被清空后,都会在任务队列中读取新的任务,如果没有新的任务,就会等待,直到有新的任务,这就叫任务循环。因为每个任务都由一个事件所触发,所以也叫事件循环。
异步机制
    如果函数是异步的,发出调用之后,马上返回,但是不会马上返回预期结果。调用者不必主动等待,当被调用者得到结果之后会通过回调函数主动通知调用者,上面咱们也简单的介绍了栈和任务队列,以及简单的事件循环,做了一些铺垫

代码

   function send () {
       ajax()...
   }
   send()

上面是一段ajax的一段代码执行,这时候单线程里面已经有这个任务了,当我们执行send()之后这个任务在页面中其实已经完成了,但是我们无法拿到它的结果,在JavaScript中通过回调函数在耗时操作执行完成后把相应的结果信息传递给回调函数,通知执行JavaScript代码的线程执行回调,这也就应上面那句话“不会马上返回预期结果”

浏览器常驻线程

渲染引擎线程:顾名思义,该线程负责页面的渲染

JS引擎线程:负责JS的解析和执行

定时触发器线程:处理定时事件,比如setTimeout, setInterval

事件触发线程:处理DOM事件

异步http请求线程:处理http请求

在这里我们要注意js引擎和渲染线程是不能同时进行的,渲染要在js引擎之前

代码
    setTimeout(function(){
        console.log("timer a");
    }, 0)
    
    for(var j = 0; j < 5; j++){
        console.log(j);
    }
    
    setTimeout(function(){
        console.log("timer b");
    }, 0) 
    console.log("click begin");
 

setTimeout的作用是操作者可以设定时间插队,我们可以把它想象成一个会员,有特殊待遇,你可以插队,但是这里的setTimeout(fn, 0)是将函数插入执行队列,等待执行,但是它不会立即执行,不是立即执行,下面的代码就是一个很好的例子 b a

    setTimeout(function() {
        console.log("a")
    }, 0)
    
    console.log("b")
总结
其实JavaScript单线程并不孤单(浏览器的其他线程帮助它),它只是执行栈内的同步任务,执行完之后会再次执行下一个,直到执行完为止,然后栈中无任务事件,它就会等待直到它出现,一直这样的循环下去

参考文章
JavaScript异步机制详解

JavaScript单线程和异步机制

阮老师Event Loop

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109873.html

相关文章

  • JS与Node.js中的事件循环

    摘要:的单线程,与它的用途有关。特点的显著特点异步机制事件驱动。队列的读取轮询线程,事件的消费者,的主角。它将不同的任务分配给不同的线程,形成一个事件循环,以异步的方式将任务的执行结果返回给引擎。 这两天跟同事同事讨论遇到的一个问题,js中的event loop,引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题,从而引出了Nodejs的...

    abson 评论0 收藏0
  • js 线程 回调

    摘要:定时器机制更正之前的错误认识函数内调用,函数结束。在规定的时间之后,依然会触发的回调。首先要确认几点单线程浏览器多线程单线程原因如果多线程,那么删除或者创建元素,都需要在线程之间通信。因为浏览器不确定是状态。所以,设计之初就是单线程。 js定时器机制 更正之前的错误认识:1.函数内调用settimeout,函数结束。在规定的时间之后,依然会触发settimeout的回调。 首先要确认j...

    enrecul101 评论0 收藏0
  • JavaScript执行顺序分析

    摘要:每个线程的任务执行顺序都是先进先出在运行的环境中,有一个负责程序本身的运行,作为主线程另一个负责主线程与其他线程的通信,被称为线程。主线程继续执行我是第一主线程执行完毕,从线程读取回调函数。 前言 上星期面试被问到了事件执行顺序的问题,想起来之前看《深入浅出Node.js》时看到这一章就忽略了,这次来分析一下JavaScript的事件执行顺序。废话少说,正题开始。 单线程JavaScr...

    chnmagnus 评论0 收藏0
  • 10分钟理解JS引擎的执行机制

    摘要:深入理解引擎的执行机制灵魂三问为什么是单线程的为什么需要异步单线程又是如何实现异步的呢中的中的说说首先请牢记点是单线程语言的是的执行机制。 深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2...

    zzbo 评论0 收藏0
  • 深入理解js引擎的执行机制

    摘要:深入理解引擎的执行机制最近在反省,很多知识都是只会用,不理解底层的知识。在阅读之前,请先记住两点是单线程语言的是的执行机制。所以,是存在异步执行的,比如单线程是怎么实现异步的场景描述通过事件循环,所以说,理解了机制,也就理解了的执行机制啦。 深入理解js引擎的执行机制 最近在反省,很多知识都是只会用,不理解底层的知识。所以在开发过程中遇到一些奇怪的比较难解决的bug,在思考的时候就会收...

    feng409 评论0 收藏0

发表评论

0条评论

xcc3641

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<