• js同步异步,任务队列


    单线程

    • 浏览器是多线程运行的,它给js分配一个线程;js就是单线程运行的【一次只干一件事】

    所谓单线程,就是只一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,在执行后面一个任务,以次类推。

    js执行分为同步和异步,其中异步来自于浏览器提供的异步队列,在浏览器中分为两个任务队列,一个是主任务队列【同步编程】,一个是等待任务队列【异步编程】

    了解js的异步我们应该先了解下js的运行环境=>浏览器

    一个浏览器通常由一下几个常住的线程

    • 渲染引擎线程:顾名思义,该线程负责页面的渲染
    • js引擎线程:负责js解析和执行
    • 定时触发器线程:处理定时事件,比如setTimeout,setInterval
    • 事件触发线程:处理DOM事件
    • 异步http请求线程:处理http请求

    注意:渲染线程和js引擎线程是不能同时进行的。渲染线程在执行任务的时候,js引擎线程会被挂起。因为js可以操作DOM,若在渲染中js处理了DOM,浏览器可能就不知所措了

    虽然JavaScript是单线程的,可是浏览器内部不是单线程的。一些I/O操作、定时器的计时和事件监听(click, keydown...)等都是由浏览器提供的其他线程来完成的。

    Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

    "同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"异步模式"则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

    "异步模式"非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

    同步

        console.log(1)
        function fn(){
            console.log(2)
        }
        fn()
        console.log(3)
    

    上面代码输入1 2 3 ,因为js是单线程的,代码由上而下依次执行

    异步

    js中

    • AJax请求
    • 定时器
    • 事件
    • 回调函数

    上面这4中都是属于异步的

        console.log(1)
        setTimeout(()=>{
            console.log(2)
        })
        console.log(3)
    

    上面代码执行会输出,1 3 2 ,因为setTimeout是异步的,js会将setTimeout放到异步队列,等待同步队列全部执行完毕,在执行异步队列

    任务队列

    js中有两类任务队列:宏任务队列和微任务队列。宏任务队列可以有多个,微任务队列只有一个

    • 宏任务:script(全局任务),setTimeout,setInterval
    • 微任务:process.nextTick, Promise, Object.observer
    setTimeout(_ => console.log(4))
    
    new Promise(resolve => {
      resolve()
      console.log(1)
    }).then(_ => {
      console.log(3)
    })
    
    console.log(2)
    

    上面代码中,setTimeout就是作为宏任务来存在的,而Promise.then则是具有代表性的微任务

    所有会进入的异步都是指的事件回调中的那部分代码

    也就是说new Promise在实例化的过程中所执行的代码都是同步进行的,而then中注册的回调才是异步执行的。
    在同步代码执行完成后才回去检查是否有异步任务完成,并执行对应的回调,而微任务又会在宏任务之前执行。所以就得到了上面的输出1 2 3 4

  • 相关阅读:
    常用电子元器件及应用
    局域网传输-LED灯搭建局域网:数据传输可达每秒3Gb
    硬件设计原理图Checklist 参考案例二 【转载】
    基于LiFi可见光通信技术的研究及应用转化调查
    T&F 圆桌:儿童智能玩具离我们还有多远?
    一座金矿:数千亿规模智能玩具市场
    【Java】+ 图片与base64互转 + 字符串与base64互转
    【Java】+ 【wss】 + WebSocketClient
    【IDEA】+SVN
    【杂项】+事件管理之时间4象限
  • 原文地址:https://www.cnblogs.com/mengxiangji/p/10913966.html
Copyright © 2020-2023  润新知