网文: https://juejin.im/post/59e85eebf265da430d571f89

并发模型和事件循环:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

Node.js事件循环,Timers, process.nextTick()


javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的。

javascript事件循环

网页渲染的过程,如页面骨架,页面原生的渲染,都是同步的。

而image,音乐等资源加载需要占用大量资源,所以使用异步任务。

  1. 同步任务,直接进入主线程,异步任务进入事件表格并注册函数。
  2. 当指定的事情完成时,Event Table会将这个函数移入Event Queue。
  3. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
  4. 上述过程会不断重复,也就是常说的Event Loop(事件循环)。

setTimeout和setInterval(fn, ms)函数

这两个函数会再间隔时间到了后,把要执行的函数放入Event Queue。

Promise与process.nextTick(callback)

nextTick是Node.js中Process模块的函数方法。它的定义:

process.nextTick()

adds callback to the "next tick queue". This queue is fully drained after the current operation on the JavaScript stack runs to completion and before the event loop is allowed to continue.

nextTick()把回调函数加到"next tick queue"下一个tick队列。

在当前JS栈运行的操作完成后,并且在事件循环被允许继续之前,这个时间段就叫做next tick。此时执行的队列queue,即next tick queue。

也就是说process.nextTick()中的回调函数会在这个时间段被执行。

所以说除了广义的同步任务,和异步任务,还有更为精细的定义:

  • 宏任务:整体代码script(这是第一轮宏任务), setTimeout, setInterval
  • 微任务:Promise, process.nextTick。

不同的任务进入对应的事件队列Event Queue。

事件循环的顺序,决定js代码的执行顺序。

  1. 进入整体代码(第一轮宏任务)后,开始第一次事件循环。这个过程包括:

    • 同步代码立即执行。
    • 异步代码,根据任务类型,放入不同的event queue
      • 宏任务
      • 微任务
      • 其他。。。
  2. 接着执行event queue的所有的微任务。本例是执行 next tick queue中的微任务。然后继续下一轮事件。
  3. 再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务。
  4. 如此反复执行2-3,完成所有的事件。

总结:

javascript是一门单线程语言,不管什么新框架新语法糖的异步,都是用同步的方法模拟的。

Event Loop是js实现异步的一种方法,也是js的执行机制mechanism。

执行机制和运行是不同的。js在不同的环境下node, browser等执行机制可能不同,但运行大多是指js解析引擎,是统一的。

微任务和宏任务还有很多类型。


摘录和再编:彻底弄懂JS执行机制的更多相关文章

  1. 彻底弄懂 JavaScript 执行机制

    本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...

  2. 这一次,彻底弄懂 JavaScript 执行机制

    本文转自https://juejin.im/post/59e85eebf265da430d571f89#heading-4 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还 ...

  3. JS执行机制详解,定时器时间间隔的真正含义

     壹 ❀ 引 通过结果倒推过程是我们常用的思考模式,我在上一篇学习promise笔记中,有少量关于promise执行顺序的例子,通过倒推,我成功让自己对于js执行机制的理解一塌糊涂,js事件机制,事件 ...

  4. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  5. 一文弄懂js的执行上下文与执行上下文栈

    目录 执行上下文与执行上下文栈 变量提升与函数提升 变量提升 函数提升 变量提升与函数提升的优先级 变量提升的一道题目引出var关键字与let关键字各自的特性 执行上下文 全局执行上下文 函数(局部) ...

  6. 彻底弄懂HTTP缓存机制及原理-转载

    首先附上原文地址,非常感谢博主大神的分享彻底弄懂HTTP缓存机制及原理 前言     Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基 ...

  7. 从一道看似简单的面试题重新理解JS执行机制与定时器

     壹 ❀ 引 最近在看前端进阶的系列专栏,碰巧看到了几篇关于JS事件执行机制的面试文章,因为我在之前一篇 JS执行机制详解,定时器时间间隔的真正含义 博文中也有记录JS执行机制,所以正好用于作为测试自 ...

  8. JS学习笔记:(三)JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

  9. 浅谈js执行机制

    关于js执行机制,老早之前就一直想写篇文章做个总结,因为和js执行顺序的面试题碰到的特别多,每次碰到总是会去网上查,没有系统地总结,搞得每次碰到都是似懂非懂的感觉,这篇文章就系统的总结一下js执行机制 ...

随机推荐

  1. Linux sed命令 以行为单位编辑文本,或替换文本中的文字

    sed -e 4a\newLine testfile 首先查看testfile中的内容如下: $ cat testfile #查看testfile 中的内容 HELLO LINUX! Linux is ...

  2. JS — 数组去重(4种方法)

    第一种:双重循环 var strCode='zxcvbnmasdfghjklopiuytrewqAWEDRFTGYHUJIK'; var str=''; for(var i=0;i<4;i++) ...

  3. you-get模块

    You-Get是一个基于 Python 3 的下载工具.使用 You-Get 可以很轻松的下载到网络上的视频.图片及音乐. 转载https://www.cnblogs.com/wangchuanyan ...

  4. python框架之Django(11)-中间件

    介绍 在django中,中间件其实就是一个类,在一个请求到来和这个请求结束之前,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在django项目的settings模块中,有一个 M ...

  5. 基于Spark Streaming + Canal + Kafka对Mysql增量数据实时进行监测分析

    Spark Streaming可以用于实时流项目的开发,实时流项目的数据源除了可以来源于日志.文件.网络端口等,常常也有这种需求,那就是实时分析处理MySQL中的增量数据.面对这种需求当然我们可以通过 ...

  6. 这5个实用技巧,教你设计出更好的App

    三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个.据统计,只有4%的app会被使用一年以上. 所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有 ...

  7. deeplabv3+ demo测试图像分割

    #!--*-- coding:utf-8 --*-- # Deeplab Demo import os import tarfile from matplotlib import gridspec i ...

  8. java求最大公约数,和最小公倍数

    import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner sc = ...

  9. https://scrapingclub.com/exercise/basic_captcha/

    def parse(self, response): # set_cookies = response.headers.getlist("set-cookie").decode(& ...

  10. [openjudge-搜索]单词接龙

    题目描述 描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙&q ...