文章主题是“单线程模型下如何保证 UI 的流畅性”。该话题针对的是 Flutter 性能原理展开的,但是 dart 语言就是 js 的延伸,很多概念和机制都是一样的。具体不细聊。此外 js 也是单线程模型,在界面展示和 IO 等方面和 dart 类似。所以结合对比讲一下,帮助梳理和类比,更加容易掌握本文的主题,和知识的横向拓展。 先从前端角度出发,分析下 event loop 和事件队列模型。再从 Flutter 层出发聊聊 dart 侧的事件队列和同步异步任务之间的关系。
假设有几个任务:
在单线程中执行,代码可能如下:
//cvoid mainThread () { string name = "姓名:" + "杭城小刘"; string birthday = "年龄:" + "1995" + "02" + "20" int age = 2021 - 1995 + 1; printf("个人信息为:%s, %s, 大小:%d", name.c_str(), birthday.c_str(), age);}
复制代码
线程开始执行任务,按照需求,单线程依次执行每个任务,执行完毕后线程马上退出。
问题 1 介绍的线程模型太简单太理想了,不可能从一开始就 n 个任务就确定了,大多数情况下,会接收到新的 m 个任务。那么 section1 中的设计就无法满足该需求。
**要在线程运行的过程中,能够接受并执行新的任务,就需要有一个事件循环机制。**最基础的事件循环可以想到用一个循环来实现。
// c++int getInput() { int input = 0; cout<< "请输入一个数"; cin>>input; return input;}
void mainThread () { while(true) { int input1 = getInput(); int input2 = getInput(); int sum = input1 + input2; print("两数之和为:%d", sum); }}
复制代码
相较于第一版线程设计,这一版做了以下改进:
真实环境中的线程模块远远没有这么简单。比如浏览器环境下,线程可能正在绘制,可能会接收到 1 个来自用户鼠标点击的事件,1 个来自网络加载 css 资源完成的事件等等。第二版线程模型虽然引入了事件循环机制,可以接受新的事件任务,但是发现没?这些任务之来自线程内部,该设计是无法接受来自其他线程的任务的。
从上图可以看出,渲染主线程会频繁接收到来自于 IO 线程的一些事件任务,当接受到的资源加载完成后的消息,则渲染线程会开始 DOM 解析;当接收到来自鼠标点击的消息,渲染主线程则会执行绑定好的鼠标点击事件脚本(js)来处理事件。
需要一个合理的数据结构,来存放并获取其他线程发送的消息?
消息队列这个词大家都听过,在 GUI 系统中,事件队列是一个通用解决方案。
消息队列(事件队列)是一种合理的数据结构。要执行的任务添加到队列的尾部,需要执行的任务,从队列的头部取出。
有了消息队列之后,线程模型得到了升级。如下:
可以看出改造分为 3 个步骤:
伪代码。构造队列接口部分
class TaskQueue { public: Task fetchTask (); // 从队列头部取出1个任务 void addTask (Task task); // 将任务插入到队列尾部}
复制代码
改造主线程
TaskQueue taskQueue;void processTask ();void mainThread () { while (true) { Task task = taskQueue.fetchTask(); processTask(task); }}
复制代码
IO 线程
void handleIOTask () { Task clickTask; taskQueue.addTask(clickTask);}
复制代码
Tips: 事件队列是存在多线程访问的情况,所以需要加锁。
浏览器环境中, 渲染进程经常接收到来自其他进程的任务,IO 线程专门用来接收来自其他进程传递来的消息。IPC 专门处理跨进程间的通信。
消息队列中有很多消息类型。内部消息:如鼠标滚动、点击、移动、宏任务、微任务、文件读写、定时器等等。
消息队列中还存在大量的与页面相关的事件。如 JS 执行、DOM 解析、样式计算、布局计算、CSS 动画等等。
上述事件都是在渲染主线程中执行的,因此编码时需注意,尽量减小这些事件所占用的时长。
Chrome 设计上,确定要退出当前页面时,页面主线程会设置一个退出标志的变量,每次执行完 1 个任务时,判断该标志。如果设置了,则中断任务,退出线程
事件队列的特点是先进先出,后进后出。那后进的任务也许会被前面的任务因为执行时间过长而阻塞,等待前面的任务执行完毕才可以执行后面的任务。这样存在 2 个问题。
Dart 是单线程的,也就是代码会有序执行。此外 Dart 作为 Flutter 这一 GUI 框架的开发语言,必然支持异步。
一个 Flutter 应用包含一个或多个 isolate,默认方法的执行都是在 main isolate 中;一个 isolate 包含 1 个 Event loop 和 1 个 Task queue。其中,Task queue 包含 1 个 Event queue 事件队列和 1 个 MicroTask queue 微任务队列。如下:
为什么需要异步?因为大多数场景下 应用都并不是一直在做运算。比如一边等待用户的输入,输入后再去参与运算。这就是一个 IO 的场景。所以单线程可以再等待的时候做其他事情,而当真正需要处理运算的时候,再去处理。因此虽是单线程,但是给我们的感受是同事在做很多事情(空闲的时候去做其他事情)
某个任务涉及 IO 或者异步,则主线程会先去做其他需要运算的事情,这个动作是靠 event loop 驱动的。和 JS 一样,dart 中存储事件任务的角色是事件队列 event queue。
Event queue 负责存储需要执行的任务事件,比如 DB 的读取。
Dart 中存在 2 个队列,一个微任务队列(Microtask Queue)、一个事件队列(Event Queue)。
Event loop 不断的轮询,先判断微任务队列是否为空,从队列头部取出需要执行的任务。如果微任务队列为空,则判断事件队列是否为空,不为空则从头部取出事件(比如键盘、IO、网络事件等),然后在主线程执行其回调函数,如下:
微任务,即在一个很短的时间内就会完成的异步任务。微任务在事件循环中优先级最高,只要微任务队列不为空,事件循环就不断执行微任务,后续的事件队列中的任务持续等待。微任务队列可由 scheduleMicroTask
创建。
通常情况,微任务的使用场景比较少。Flutter 内部也在诸如手势识别、文本输入、滚动视图、保存页面效果等需要高优执行任务的场景用到了微任务。
所以,一般需求下,异步任务我们使用优先级较低的 Event Queue。比如 IO、绘制、定时器等,都是通过事件队列驱动主线程来执行的。
Dart 为 Event Queue 的任务提供了一层封装,叫做 Future。把一个函数体放入 Future 中,就完成了同步任务到异步任务的包装(类似于 iOS 中通过 GCD 将一个任务以同步、异步提交给某个队列)。Future 具备链式调用的能力,可以在异步执行完毕后执行其他任务(函数)。
看一段具体代码:
void main() { print('normal task 1'); Future(() => print('Task1 Future 1')); print('normal task 2'); Future(() => print('Task1 Future 2')) .then((value) => print("subTask 1")) .then((value) => print("subTask 2"));}//lbp@MBP ~/Desktop dart index.dartnormal task 1normal task 2Task1 Future 1Task1 Future 2subTask 1subTask 2
复制代码
main 方法内,先添加了 1 个普通同步任务,然后以 Future 的形式添加了 1 个异步任务,Dart 会将异步任务加入到事件队列中,然后理解返回。后续代码继续以同步任务的方式执行。然后再添加了 1 个普通同步任务。然后再以 Future 的方式添加了 1 个异步任务,异步任务被加入到事件队列中。此时,事件队列中存在 2 个异步任务,Dart 在事件队列头部取出 1 个任务以同步的方式执行,全部执行(先进先出)完毕后再执行后续的 then。
Future 与 then 公用 1 个事件循环。如果存在多个 then,则按照顺序执行。
例 2:
void main() { Future(() => print('Task1 Future 1')); Future(() => print('Task1 Future 2'));
Future(() => print('Task1 Future 3')) .then((_) => print('subTask 1 in Future 3'));
Future(() => null).then((_) => print('subTask 1 in empty Future'));}lbp@MBP ~/Desktop dart index.dartTask1 Future 1Task1 Future 2Task1 Future 3subTask 1 in Future 3subTask 1 in empty Future
复制代码
main 方法内,Task 1 添加到 Future 1 中,被 Dart 添加到 Event Queue 中。Task 1 添加到 Future 2 中,被 Dart 添加到 Event Queue 中。Task 1 添加到 Future 3 中,被 Dart 添加到 Event Queue 中,subTask 1 和 Task 1 共用 Event Queue。Future 4 中任务为空,所以 then 里的代码会被加入到 Microtask Queue,以便下一轮事件循环中被执行。
综合例子
void main() { Future(() => print('Task1 Future 1')); Future fx = Future(() => null); Future(() => print("Task1 Future 3")).then((value) { print("subTask 1 Future 3"); scheduleMicrotask(() => print("Microtask 1")); }).then((value) => print("subTask 3 Future 3"));
Future(() => print("Task1 Future 4")) .then((value) => Future(() => print("sub subTask 1 Future 4"))) .then((value) => print("sub subTask 2 Future 4"));
Future(() => print("Task1 Future 5"));
fx.then((value) => print("Task1 Future 2"));
scheduleMicrotask(() => print("Microtask 2"));
print("normal Task");}lbp@MBP ~/Desktop dart index.dartnormal TaskMicrotask 2Task1 Future 1Task1 Future 2Task1 Future 3subTask 1 Future 3subTask 3 Future 3Microtask 1Task1 Future 4Task1 Future 5sub subTask 1 Future 4sub subTask 2 Future 4
复制代码
解释:
异步函数的结果在将来某个时刻才返回,所以需要返回一个 Future 对象,供调用者使用。调用者根据需求,判断是在 Future 对象上注册一个 then 等 Future 执行体结束后再进行异步处理,还是同步等到 Future 执行结束。Future 对象如果需要同步等待,则需要在调用处添加 await,且 Future 所在的函数需要使用 async 关键字。
await 并不是同步等待,而是异步等待。Event Loop 会将调用体所在的函数也当作异步函数,将等待语句的上下文整体添加到 Event Queue 中,一旦返回,Event Loop 会在 Event Queue 中取出上下文代码,等待的代码继续执行。
await 阻塞的是当前上下文的后续代码执行,并不能阻塞其调用栈上层的后续代码执行
void main() { Future(() => print('Task1 Future 1')) .then((_) async => await Future(() => print("subTask 1 Future 2"))) .then((_) => print("subTask 2 Future 2")); Future(() => print('Task1 Future 2'));}lbp@MBP ~/Desktop dart index.dartTask1 Future 1Task1 Future 2subTask 1 Future 2subTask 2 Future 2
复制代码
解析:
Future(() => print("subTask 1 Future 2"))
被添加到 Event Queue 中,所在的 await 函数也被添加到了 Event Queue 中。第二个 then 也被添加到 Event Queue 中Dart 为了利用多核 CPU,将 CPU 层面的密集型计算进行了隔离设计,提供了多线程机制,即 Isolate。每个 Isolate 资源隔离,都有自己的 Event Loop 和 Event Queue、Microtask Queue。Isolate 之间的资源共享通过消息机制通信(和进程一样)
使用很简单,创建时需要传递一个参数。
void coding(language) { print("hello " + language);}void main() { Isolate.spawn(coding, "Dart");}lbp@MBP ~/Desktop dart index.darthello Dart
复制代码
大多数情况下,不仅仅需要并发执行。可能还需要某个 Isolate 运算结束后将结果告诉主 Isolate。可以通过 Isolate 的管道(SendPort)实现消息通信。可以在主 Isolate 中将管道作为参数传递给子 Isolate,当子 Isolate 运算结束后将结果利用这个管道传递给主 Isolate
void coding(SendPort port) { const sum = 1 + 2; // 给调用方发送结果 port.send(sum);}
void main() { testIsolate();}
testIsolate() async { ReceivePort receivePort = ReceivePort(); // 创建管道 Isolate isolate = await Isolate.spawn(coding, receivePort.sendPort); // 创建 Isolate,并传递发送管道作为参数 // 监听消息 receivePort.listen((message) { print("data: $message"); receivePort.close(); isolate?.kill(priority: Isolate.immediate); isolate = null; });}lbp@MBP ~/Desktop dart index.dartdata: 3
复制代码
此外 Flutter 中提供了执行并发计算任务的快捷方式-compute 函数。其内部对 Isolate 的创建和双向通信进行了封装。
实际上,业务开发中使用 compute 的场景很少,比如 JSON 的编解码可以用 compute。
计算阶乘:
int testCompute() async { return await compute(syncCalcuateFactorial, 100);}
int syncCalcuateFactorial(upperBounds) => upperBounds < 2 ? upperBounds : upperBounds * syncCalcuateFactorial(upperBounds - 1);
复制代码
总结:
领取专属 10元无门槛券
私享最新 技术干货