• 技术文章 >web前端 >前端问答

    javascript中微任务包含哪些

    青灯夜游青灯夜游2022-02-08 11:44:58原创1012

    在javascript中,微任务包含:1、“Promise”;2、“Object.observe”;3、“MutationObserver”;4、Node.js环境下的“process.nextTick”;5、“async/await”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    事件循环

    JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一类是基于 Browsing Context,一种是基于 Worker。二者的运行是独立的,也就是说,每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop,每一个 Web Worker 也有一个独立的 Event Loop。

    本文所涉及到的事件循环是基于 Browsing Context。

    任务队列

    根据规范,事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中,可以有一个或者多个任务队列(task queue),一个任务队列便是一系列有序任务(task)的集合;每个任务都有一个任务源(task source),源自同一个任务源的 task 必须放到同一个任务队列,从不同源来的则被添加到不同队列。setTimeout/Promise 等API便是任务源,而进入任务队列的是他们指定的具体执行任务。

    在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理模型是比较复杂的,但关键步骤如下:

    在上诉tick的基础上需要了解几点:

    1.jpg

    宏任务

    (macro)task,可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。

    浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行,会在一个(macro)task执行结束后,在下一个(macro)task 执行开始前,对页面进行重新渲染,流程如下:

    (macro)task->渲染->(macro)task->...

    宏任务包含:

    script(整体代码)
    setTimeout
    setInterval
    I/O
    UI交互事件
    postMessage
    MessageChannel
    setImmediate(Node.js 环境)

    微任务

    microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说,在当前task任务后,下一个task之前,在渲染之前。

    所以它的响应速度相比setTimeout(setTimeout是task)会更快,因为无需等渲染。也就是说,在某一个macrotask执行完后,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)。

    微任务包含:

    Promise
    Object.observe
    MutationObserver
    process.nextTick(Node.js 环境)
    async/await

    运行机制

    在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理模型是比较复杂的,但关键步骤如下:

    如图:

    2.jpg

    【相关推荐:javascript学习教程

    以上就是javascript中微任务包含哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 微任务
    上一篇:javascript中对行为的定义是什么 下一篇:javascript怎么设置延迟几秒
    千万级数据并发解决方案

    相关文章推荐

    • javascript怎么隐藏元素• javascript变量提升是什么意思• javascript怎么判断指定值是否为正数• javascript中公有方法和私有方法是什么• javascript怎么实现三个数求平均数• JavaScript中value的用法是什么
    1/1

    PHP中文网