zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    系统维护相关问题
    Python环境维护
    哈希表解决字符串问题
    论文笔记二:《A Tutoral on Spectral Clustering》
    论文笔记之哈希学习比较--《Supervised Hashing with Kernels》《Towards Optimal Binary Code Learning via Ordinal Embedding》《Top Rank Supervised Binary Coding for Visual Search》
    Java中String、StringBuffer、StringBuilder的比较与源 代码分析
    浙大pat1040 Longest Symmetric String(25 分)
    浙大pat1039 Course List for Student(25 分)
    浙大pat---1036 Boys vs Girls (25)
    百炼oj-4151:电影节
  • 原文地址:https://www.cnblogs.com/mengxiangji/p/10913971.html
Copyright © 2011-2022 走看看