草庐IT

js EventLoop、宏任务和微任务

咸鱼不咸_123 2023-03-28 原文

1.javascript是单线程的语言

javascript是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。

如下：如果有多个任务要执行，执行其他任务时，其他任务都要进行等待

52.png

1.1 单线程执行任务队列的问题

如果前一个任务非常耗时，则后续的任务不得不一直等待，从而导致程序假死的问题。

2.同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题，javascript把待执行的任务分为了两类。

  • 同步任务
    • 又叫做 非耗时任务，指的是在主线程上排队执行的那些任务
    • 只有前一个任务执行完毕，才能执行后一个任务
  • 异步任务
    • 又叫做非耗时任务，异步任务由javascript委托给宿主环境进行执行
    • 当异步任务执行完成之后，会通知javascript主线程执行异步任务的回调函数

2.1 同步任务和异步任务的执行过程

53.png
  • 同步任务由javascript主线程次序执行
  • 异步任务委托给宿主环境执行
  • 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
  • javascript主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行。
  • javascript主线程不断重复上面的第4步

js的主线程会从自己的执行栈中去执行栈中的所有任务，当发现任务是同步任务时，js会自己进行执行。如果是异步任务，会委托给宿主环境执行。当js发现自己的执行栈中被执行完后，会从任务队列中按顺序把对应的回调函数取出来放入栈中，按顺序执行。

3.EventLoop的基本概念

javascript主线程从“任务队列”中读取异步任务回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为EventLoop(事件循环)。

3.1 结合EventLoop分析输出顺序

import thenFs from "then-fs";

console.log("A");
thenFs.readFile("./studyPrommise/files/1.txt","utf8").then(res=>{console.log("B");})


setTimeout(()=>{
  console.log("C");
},0)

console.log("D");
  • 最终的结果是 A D C B
  • 因为主线程上只有A和D，是同步任务，所以会依次执行，而B、C是异步任务让js委托给宿主环境执行。
  • 然后定时器，只是延时了0秒，所以就会让宿主环境立即执行，然后返回一个回调函数，等主线程空闲时执行。

4.宏任务和微任务

javascript对异步任务又做了进一步的划分，分为了两类，

  1. 宏任务(macrotask)
    • 异步Ajax请求
    • setTimeOut、setInterval
    • 文件操作
    • 其他宏任务
  2. 微任务(microtask)
    • Promise.then、.catch、和.finally
    • process.nextTick
    • 其他微任务
54.png

4.1 宏任务和微任务的执行顺序

55.png
  • 每个宏任务执行完后，都会检查是否存在待执行的微任务
  • 如果有，则会将所有待执行的微任务执行完，再执行下一个宏任务
  • 宏任务和微任务是交替执行的

4.2 根据宏任务和微任务分析代码输出的顺序

setTimeout(()=>{
  console.log(1);
})

new Promise(function(resolve){
  console.log(2);
  resolve()
}).then(res=>{
  console.log(3);
})

console.log(4);

最后的结果是 2 4 3 1

  • setTimeout是一个宏任务，
  • new Promise()是一个同步任务，.then()是一个微任务
  • console.log(4)是一个同步任务

所以执行的顺序是：执行的准则是 先执行同步任务，再去任务队列中读取回调函数放入执行栈中，按次序执行。但异步任务中：先执行微任务，再执行宏任务

  1. new Promise()操作
  2. console.log(4)
  3. .then()
  4. setTimeout

4.3 经典面试题

56.png

先来分析同步任务和异步任务，最后来分析异步任务中的宏任务和微任务

  • 第1行是同步任务1
  • 第3-10行是异步任务1(宏任务)
  • 第12-15行是同步任务2，也就是new Promise()这一部分
  • 第15-17行是异步任务2(微任务)
  • 第20-28行是异步任务3(宏任务)

所以执行顺序是：同步任务js本身自身处理，而异步任务交给宿主环境执行

js本身处理的过程：

  • 执行同步任务1 ：输出1
  • 执行同步任务2：输出 5
  • 同步任务执行完
  • 从任务队列中取出执行完对应的回调函数，放入执行栈中，依次执行

宿主环境处理的过程

  • 先执行异步任务2，执行异步任务2,并返回到任务队列中，待主线程执行 输出 6
  • 看是否存在待执行的微任务，发现没有，按次序执行宏任务
  • 先执行 异步任务1 ，并返回到任务队列中，待主线程执行输出 2 3 4
  • 在执行异步任务3 并返回到任务队列中，待主线程执行输出 7 8 9

所以总的输出结果是: 1 5 6 2 3 4 7 8 9

5.总结

EventLoop和宏任务和微任务.png
EventLoop任务sectionstrongli

有关js EventLoop、宏任务和微任务的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  3. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

  4. ruby - 帮助使用 Ruby 中的 "Whenever"gem 来执行 cron 任务 - 2

    我以前没有使用过cron，所以我不能确定我这样做是对的。我想要自动化的任务似乎没有运行。我在终端中执行了这些步骤:sudogeminstall每当切换到应用程序目录无论何时。(这创建了文件schedule.rb)我将此代码添加到schedule.rb:every10.minutesdorunner"User.vote",environment=>"development"endevery:hourdorunner"Digest.rss",:environment=>"development"end我将此代码添加到deploy.rb:after"deploy:symlink","depl

  5. ruby - 在 rake 任务中运行 capybara - 2

    如何在Rake任务中运行Capybara功能？例如:访问('http://google.com')谢谢! 最佳答案 在任务中尝试这样的事情:require'capybara'require'capybara/dsl'Capybara.current_driver=:seleniumBrowser=Class.new{includeCapybara::DSL}page=Browser.new.pagepage.visit("http://www.google.com")puts(page.html)

  6. ruby - 在 Rakefile 中动态生成 Rake 测试任务(基于现有的测试文件) - 2

    我正在根据Rakefile中的现有测试文件动态生成测试任务。假设您有各种以模式命名的单元测试文件test_.rb.所以我正在做的是创建一个以“测试”命名空间内的文件名命名的任务。使用下面的代码，我可以用raketest:调用所有测试require'rake/testtask'task:default=>'test:all'namespace:testdodesc"Runalltests"Rake::TestTask.new(:all)do|t|t.test_files=FileList['test_*.rb']endFileList['test_*.rb'].eachdo|task|n

  7. ruby-on-rails - 使用 Rspec 测试 rake 任务不接受参数 - 2

    根据thispostbyStephenHagemann，我正在尝试为我的一个rake任务编写Rspec测试.lib/tasks/retry.rake:namespace:retrydotask:message,[:message_id]=>[:environment]do|t,args|TextMessage.new.resend!(args[:message_id])endendspec/tasks/retry_spec.rb:require'rails_helper'require'rake'describe'retrynamespaceraketask'dodescribe're

  8. ruby-on-rails - 在 gem 的 rake 任务中需要 gem - 2

    我正在使用jeweler为Rails3创建一个gem。该gem包含一个rake任务，它所做的其中一件事是删除数据库，所以我正在使用“database_cleaner”。我在gem的Gemfile中指定gem依赖项gem'database_cleaner'在Rakefile中Jeweler::Tasks.newdo|gem|...gem.add_dependency'database_cleaner'end然后在lib中我创建了文件my_gem.rb和tasks.rake。如下，my_gem.rb:moduleMyGemclassRailtie和tasks.rake:task:my_ta

  9. ruby-on-rails - 在调用 Rake 任务时设置多个环境变量 - 2

    我可以像这样调用一个Rake任务并设置一个环境变量:$ONE=1raketemp:both但是如何设置两个环境变量呢？这行不通:$ONE=1TWO=2raketemp:both这行得通，但读起来很困惑:$ONE=1raketemp:bothTWO=2如何在调用rake之前传递多个环境？ 最佳答案 同意@Ernest；它应该工作。这是一个示例...示例rake任务以回显变量:task:echo_envdoputs"VAR1:#{ENV['VAR1']}"puts"VAR2:#{ENV['VAR2']}"end执行任务:VAR1=fir

  10. ruby - 如何让 Ruby 每 10 分钟运行一次任务？ - 2

    我想每10分钟执行一次cron作业，但我的系统只执行1小时。所以我正在寻找一种方法来做到这一点。我看过Timer和sleep但我不确定如何执行此操作，甚至不知道如何实现此操作。 最佳答案 看看http://rufus.rubyforge.org/rufus-scheduler/rufus-scheduler是一个用于调度代码片段(作业)的Rubygem。它了解在特定时间、在特定时间、每x次或仅通过CRON语句运行作业。rufus-scheduler不能替代cron/at，因为它在Ruby内部运行。

随机推荐