Skip to content

宏任务和微任务 #37

@Geek-James

Description

@Geek-James

参考链接

1.从Chrome源码看事件循环

2.深入理解 JavaScript 事件循环,宏任务与微任务

3.js 宏任务和微任务

1.引言

js作为单线程的运行机制,必定有自己的运行顺序,在听了一次分享后,也好奇这种运行的机制到底是什么?

js可分为同步任务和异步任务,对于同步的任务,我们当然知道按照顺序进行执行,但是对于异步的操作,会有一个优先级的执行顺序,分别为宏任务和微任务.

宏任务(macrotasks)和微任务(microtasks)??包含什么?

  • 宏任务(macrotasks): setTimeout, setInterval, setImmediate, I/O, UI rendering.
  • 宏任务本质: 参与了 事件循环的异步任务。
  • 微任务(microtasks): process.nextTick, Promises, Object.observe(废弃), MutationObserver
  • 微任务本质:直接在 Javascript 引擎中的执行的, 没有参与 事件循环的异步任务。
  • 宏任务,微任务的优先级:promise 是在当前脚本代码执行完后,立刻执行的,它并没有参与事件循环,所以它的优先级是高于 setTimeout

 在js执行时候,一个主线程里面都会有一个事件循环(消息循环|运行循环)和事件队列,存放各种要处理的事件信息,通过这个循环不断处理这些事件信息或消息。

谈到这里,很明显知道,其实出现宏任务和微任务和浏览器以及js的执行机制有很大的关系。

2.javascript的执行runtime

JavaScript的运行分为

  • 1.javaScript Engine,Chrome 的引擎就是 V8

  • 2.Web APIs,DOM 的操作,AJAX,Timeout 等实际上调用的都是这里提供的

  • 3.Callback Queue,回调的队列,也就是刚刚所有的 Web APIs 里面的回调函数,实际上都是放在这里排队的

  • 4.EventLoop,事件循环,也就是刚所说的宏任务和微任务的容器

那什么是 Call Stack 呢?

Call Stack本身就是一个调用栈(就像浏览器中的JavaScript解释器),是存放执行的重要条件,也是因为只有一个调用栈,所以被称为单线程。

追踪函数执行流的一种机制,当执行环境调用了多个函数时,通过调用栈,我们可以追踪到哪一个函数在执行,执行的函数体中又调用了哪些函数。每调用一个函数,解释器就会把该函数添加进调用栈并开始执行。正在调用栈中执行的函数还调用了其它函数,那么新函数也将会被添加进调用栈,一旦这个函数被调用,便会立即执行,当前函数执行完毕后,解释器将其清出调用栈,继续执行当前执行环境下的剩余的代码,当分配的调用栈空间被占满时,会引发“堆栈溢出”

那什么是 callback quene呢?

在js的编译阶段,将一些事件放入在执行队列中,先进来的先执行.

那什么是 EventLoop事件循环呢?

一个作用就是将callback quene队列里的执行事件按照FIFO规则放在在call stack中来执行

3.事件循环

众所周知js是单线程的,执行较长的js时候,页面会卡死,无法响应,但是所有的操作都会被记住到另外的队列。比如:点击了一个元素,不会立刻的执行,但是等到js加载完毕后就会执行刚才点击的操作,能够知道有一个队列记录了所有有待执行的操作,这个队列分为微观和宏观。微观会比宏观执行得更快。

事件循环就是多线程的一种工作方式,Chrome里面是使用了共享的task_runner对象给自己和其它线程post task过来存起来,用一个死循环不断地取出task执行,或者进入休眠等待被唤醒。Mac的Chrome渲染线程和浏览器线程还借助了Mac的sdk Cococa的NSRunLoop来做为UI事件的消息源。Chrome的多进程通信(不同进程的IO线程的本地socket通信)借助了libevent的事件循环,并加入了到了主消息循环里面。说白了就是循环直接递归查找事件.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions