美文网首页
浏览器中的JS事件循环机制

浏览器中的JS事件循环机制

作者: 2016_18点 | 来源:发表于2018-11-26 10:21 被阅读0次

一、概述

JavaScript是单线程(只有一个主线程)的语言
Event Loop是JavaScript的执行机制
JavaScript的任务分为同步任务和异步任务
异步任务分为宏任务和微任务

二、几个概念:

  • 同步任务(synchronous):**指在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。
  • 异步任务(asynchronous):指不进入主线程、而进入"任务队列"的任务
  • 宏任务(macrotask)包括:
    setTimeOut 、 setInterval 、setImmediate 、 I/O 、 各种callback、UI渲染等
    优先级如下:主代码块 > setImmediate >MessageChannel > setTimeOut/setInterval
  • 微任务(microtask):包括process.nextTick 、Promise、MutationObserver 、async(实质上也是promise)
    优先级如下:
    process.nextTick > Promise >MutationOberser
  • 任务队列(task queue/callback queue):包括1个microtask队列和1个或多个macrotask队列

三、事件循环可以简单描述为:

主代码块->微任务->宏任务->微任务->宏任务...(主代码块也是一个宏任务)

详细解释如下

  1. 主代码块入栈
  2. 顺序执行代码块中的同步任务,遇到异步任务则交由浏览器内核的其模块处理,处理完后将异步任务的回调函数加入到任务队列中(一般不同异步任务的回调函数会放入不同的任务队列之中)
  3. 当函数执行栈为空时,若microtask队列中有任务则先将microtask队列中的所有微任务入栈执行,当函数执行栈为空,再从macrotask队列中取出一个宏任务入栈。
  4. 2~3步骤循环,直到所有任务执行完

图解如下:


四、代码实例

console.log(script start)
setTimeout(function() {
console.log('timer over')
},0)
Promise****.resolve().then(function() {
console*.log('promise1')
}).then(function() {
console.log('promise2')
})
console.log('script end')

输出结果:
// script start
// script end
// promise1
// promise2
// timer over

相关文章

  • 浏览器和Node事件循环的区别

    事件循环,是 js 中老生常谈的一个话题了,而在浏览器和 Node 中的事件循环执行机制也不相同,浏览器的事件循环...

  • JavaScript 异步

    异步机制详解 才清晰知道浏览器里面的JS引擎运行来跑js,js中事件循环包含栈(用来执行同步任务),消息队列(用来...

  • 再看浏览器事件循环和NodeJS事件循环

    事件循环是浏览器和Node用来解决JS单线程运行带来的问题的一种运行机制。浏览器和NodeJS环境下的事件循环是不...

  • 事件循环机制

    事件循环(evenloop) 事件循环机制是宿主环境提供的。js中处理异步,增加了任务队列的概念(你不知道的js中...

  • JS事件循环(Event Loop)

    js中的事件循环是JavaScript代码在浏览器运行中的一种机制,是解决JavaScript单线程运行时不会阻塞...

  • js定时器

    从JS执行机制说起 浏览器(或者说JS引擎)执行JS的机制是基于事件循环。 由于JS是单线程,所以同一时间只能执行...

  • 浏览器中的JS事件循环机制

    一、概述 JavaScript是单线程(只有一个主线程)的语言Event Loop是JavaScript的执行机制...

  • JS事件循环机制 eventloop

    如何理解JS事件的循环机制(浏览器端)答: 我们知道JS是单线程运行的(暂时撇去web worker)、是异步的、...

  • JavaScript的事件机制详解

    【js事件详解】js事件封装函数,js跨浏览器事件处理机制 一、事件流 事件流描述的是从页面中接受事件的顺序。IE...

  • js事件循环机制

    js事件循环机制 一、 执行栈 二、 任务队列(同步任务和异步任务) 三、 宏任务和微任务 四、 浏览器下的事件循...

网友评论

      本文标题:浏览器中的JS事件循环机制

      本文链接:https://www.haomeiwen.com/subject/asvvqqtx.html