深入了解Flutter的isolate(1) —- 事件循环(event loop)及代码运行顺序

全栈程序员站长

发布于 2021-06-22 19:55:02

6760

发布于 2021-06-22 19:55:02

前言

接触过Flutter的人都知道，Flutter是用Dart来写的，Dart没有进程和线程的概念，所有的Dart代码都是在isolate上运行的，那么isolate到底是什么？本系列的文章将详细讨论。这篇文章讨论事件队列(event loop)及Dart代码运行顺序。

0x00 同步代码和异步代码

我们对Dart代码进行分类：同步代码和异步代码；我们在写Dart代码的时候，就只有两种代码，

同步代码：就是一行行写下来的代码
异步代码：就是以Future等修饰的代码

这两类代码是不同的：

1.运行顺序不同

同步代码和异步代码运行的顺序是不同的：

先运行同步代码，在运行异步代码
复制代码

就是，即使我异步代码写在最前面，同步代码写在最后面，不好意思，我也是先运行后面的同步代码，同步代码都运行完后，在运行前面的异步代码。

2.运行的机制不同

异步代码是运行在event loop里的，这是一个很重要的概念，这里可以理解成Android里的Looper机制，是一个死循环，event loop不断的从事件队列里取事件然后运行。

0x01 event loop 架构

下面是event loop大致的运行图：

这个很好理解，事件events加到Event queue里，Event loop循环从Event queue里取Event执行。

这个理解后，在看event loop详细的运行图：

从这里看到，启动app（start app）后：

先查看MicroTask queue是不是空的，不是的话，先运行microtask
一个microtask运行完后，会看有没有下一个microtask，直到Microtask queue空了之后，才会去运行Event queue 3.在Evnet queue取出一个event task运行完后，又会跑到第一步，去运行microtask

这里多了两个名词：MicroTask和Event，这代表了两个不同的异步task

而且可以看出：

如果想让任务能够尽快执行，就用MicroTask

1. MicroTask

这个大家应该不太清楚，但是这个也是dart:async提供的异步方法，使用方式：

// Adds a task to the 先查看MicroTask queue.
scheduleMicrotask((){
  // ...code goes here...
}); 
复制代码

或者：

new Future.microtask((){
    // ...code goes here...
});
复制代码

2.Event

Event我们就很清楚了，就是Future修饰的异步方法，使用方式：

// Adds a task to the Event queue.
new Future(() {
  // ...code goes here...
});
复制代码

0x02

纯粹讲理论知识不太好理解，我们直接上代码，讲一个例子，看如下的代码，请问打印顺序是什么样的？

import 'dart:async';
void main() {
  print('main #1 of 2');
  scheduleMicrotask(() => print('microtask #1 of 3'));

  new Future.delayed(new Duration(seconds:1),
      () => print('future #1 (delayed)'));

  new Future(() => print('future #2 of 4'))
      .then((_) => print('future #2a'))
      .then((_) {
        print('future #2b');
        scheduleMicrotask(() => print('microtask #0 (from future #2b)'));
      })
      .then((_) => print('future #2c'));

  scheduleMicrotask(() => print('microtask #2 of 3'));

  new Future(() => print('future #3 of 4'))
      .then((_) => new Future(
                   () => print('future #3a (a new future)')))
      .then((_) => print('future #3b'));

  new Future(() => print('future #4 of 4'))
  .then((_){
    new Future(() => print('future #4a'));
  })
  .then((_) => print('future #4b'));
  scheduleMicrotask(() => print('microtask #3 of 3'));
  print('main #2 of 2');
}
复制代码

这里你肯定好奇为啥future #4 of 4在future #3 of 4后面，因为 future #3 of 4的then里又新建了一个Future，所以这个task会加到event queue的最后面。

最后的结果就是：

main #1 of 2
main #2 of 2
microtask #1 of 3
microtask #2 of 3
microtask #3 of 3
future #2 of 4
future #2a
future #2b
future #2c
microtask #0 (from future #2b)
future #3 of 4
future #4 of 4
future #4b
future #3a (a new future)
future #3b
future #4a
future #1 (delayed)
复制代码