diff --git a/Chapter1 - iOS/1.95.md b/Chapter1 - iOS/1.95.md index f45f59f..a0b4bfc 100644 --- a/Chapter1 - iOS/1.95.md +++ b/Chapter1 - iOS/1.95.md @@ -1,10 +1,12 @@ -# 从 flutter 和前端角度出发，聊聊单线程模型下如何保证 UI 流畅性 +# 从 Flutter 和前端角度出发，聊聊单线程模型下如何保证 UI 流畅性 -> 文章主题是“单线程模型下如何保证 UI 的流畅性”。该话题针对的是 flutter 性能原理展开的，但是 dart 语言就是 js 的延伸，很多概念和机制都是一样的。具体不细聊。此外 js 也是单线程模型，在界面展示和 IO 等方面和 dart 类似。所以结合对比讲一下，帮助梳理和类比，更加容易掌握本文的主题，和知识的横向拓展。 +> 文章主题是“单线程模型下如何保证 UI 的流畅性”。该话题针对的是 Flutter 性能原理展开的，但是 dart 语言就是 js 的延伸，很多概念和机制都是一样的。具体不细聊。此外 js 也是单线程模型，在界面展示和 IO 等方面和 dart 类似。所以结合对比讲一下，帮助梳理和类比，更加容易掌握本文的主题，和知识的横向拓展。 > -> 先从前端角度出发，分析下 event loop 和事件队列模型。再从 flutter 层出发聊聊 dart 侧的事件队列和同步异步任务之间的关系。 +> 先从前端角度出发，分析下 event loop 和事件队列模型。再从 Flutter 层出发聊聊 dart 侧的事件队列和同步异步任务之间的关系。 + + ## 一、单线程模型的设计 @@ -31,7 +33,7 @@ void mainThread () { 线程开始执行任务，按照需求，单线程依次执行每个任务，执行完毕后线程马上退出。 -![基础单线程模型](./../assets/2021-06-18-SingleThread1.png) +![基础单线程模型]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-18-SingleThread1.png) @@ -65,7 +67,7 @@ void mainThread () { - 引入了**循环机制**，线程不会做完事情马上退出。 - 引入了**事件**。线程一开始会等待用户输入，等待的时候线程处于暂停状态，当用户输入完毕，线程得到输入的信息，此时线程被激活。执行相加的操作，最终输出结果。不断的等待输入，并计算输出。 -![](./../assets/2021-06-18-SingleThread2.png) +![]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-18-SingleThread2.png) @@ -75,7 +77,7 @@ void mainThread () { 真实环境中的线程模块远远没有这么简单。比如浏览器环境下，线程可能正在绘制，可能会接收到1个来自用户鼠标点击的事件，1个来自网络加载 css 资源完成的事件等等。第二版线程模型虽然引入了事件循环机制，可以接受新的事件任务，但是发现没？这些任务之来自线程内部，该设计是无法接受来自其他线程的任务的。 -![第三版线程模型](./../assets/2021-06-18-SingleThread3.png) +![第三版线程模型]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-18-SingleThread3.png) @@ -87,13 +89,343 @@ void mainThread () { -![事件队列](./../assets/2021-06-18-SingleThread4.png) +![事件队列]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-18-SingleThread4.png) **消息队列（事件队列）是一种合理的数据结构。要执行的任务添加到队列的尾部，需要执行的任务，从队列的头部取出。** -有了消息队列之后，线程模型得到了升华，如下： +有了消息队列之后，线程模型得到了升级。如下： -![单线程模型第四版](./../assets/2021-06-18-SingleThread5.png) +![单线程模型第四版]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-18-SingleThread5.png) + + + +可以看出改造分为3个步骤： + +- 构建一个消息队列 +- IO 线程产生的新任务会被添加到消息队列的尾部 +- 渲染主线程会循环的从消息队列的头部读取任务，执行任务 + +伪代码。构造队列接口部分 + +```c++ +class TaskQueue { + public: + Task fetchTask (); // 从队列头部取出1个任务 + void addTask (Task task); // 将任务插入到队列尾部 +} +``` + +改造主线程 + +```c++ +TaskQueue taskQueue; +void processTask (); +void mainThread () { + while (true) { + Task task = taskQueue.fetchTask(); + processTask(task); + } +} +``` + +IO 线程 + +```c++ +void handleIOTask () { + Task clickTask; + taskQueue.addTask(clickTask); +} +``` + +Tips: 事件队列是存在多线程访问的情况，所以需要加锁。 + + + +### 4. 处理来自其他线程的任务 + +![单线程模型+跨进程任务]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-19-SingleThread6.png) + +浏览器环境中，　渲染进程经常接收到来自其他进程的任务，IO 线程专门用来接收来自其他进程传递来的消息。IPC 专门处理跨进程间的通信。 + + + +### 5. 消息队列中的任务类型 + +消息队列中有很多消息类型。内部消息：如鼠标滚动、点击、移动、宏任务、微任务、文件读写、定时器等等。 + +消息队列中还存在大量的与页面相关的事件。如 JS 执行、DOM 解析、样式计算、布局计算、CSS 动画等等。 + +上述事件都是在渲染主线程中执行的，因此编码时需注意，尽量减小这些事件所占用的时长。 + + + +### 6. 如何安全退出 + +Chrome 设计上，确定要退出当前页面时，页面主线程会设置一个退出标志的变量，每次执行完1个任务时，判断该标志。如果设置了，则中断任务，退出线程 + + + +### 7. 单线程的缺点 + +事件队列的特点是先进先出，后进后出。那后进的任务也许会被前面的任务因为执行时间过长而阻塞，等待前面的任务执行完毕才可以执行后面的任务。这样存在2个问题。 + +- 如何处理高优先级的任务 + + 假如要监控 DOM 节点的变化情况（插入、删除、修改 innerHTML），然后触发对应的逻辑。最基础的做法就是设计一套监听接口，当 DOM 变化时，渲染引擎同步调用这些接口。不过这样子存在很大的问题，就是 DOM 变化会很频繁。如果每次 DOM 变化都触发对应的 JS 接口，则该任务执行会很长，导致**执行效率**的降低 + + 如果将这些 DOM 变化做为异步消息，假如消息队列中。可能会存在因为前面的任务在执行导致当前的 DOM 消息不会被执行的问题，也就是影响了监控的**实时性**。 + + 如何权衡效率和实时性？**微任务** 就是解决该类问题的。 + + 通常，我们把消息队列中的任务成为**宏任务**，每个宏任务中都包含一个**微任务队列**，在执行宏任务的过程中，假如 DOM 有变化，则该变化会被添加到该宏任务的微任务队列中去，这样子效率问题得以解决。 + + 当宏任务中的主要功能执行完毕欧，渲染引擎会执行微任务队列中的微任务。因此实时性问题得以解决 + + + +- 如何解决单个任务执行时间过长的问题 + + ![卡顿]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-19-SingleThread7.png) + + 可以看出，假如 JS 计算超时导致动画 paint 超时，会造成卡顿。浏览器为避免该问题，采用 callback 回调的设计来规避，也就是让 JS 任务延后执行。 + +## 二、 flutter 里的单线程模型 + + + +### 1. event loop 机制 + + + +Dart 是单线程的，也就是代码会有序执行。此外 Dart 作为 Flutter 这一 GUI 框架的开发语言，必然支持异步。 + +一个 Flutter 应用包含一个或多个 **isolate**，默认方法的执行都是在 **main isolate** 中；**一个 isolate 包含1个 Event loop 和1个 Task queue。其中，Task queue 包含1个 Event queue 事件队列和1个 MicroTask queue 微任务队列**。如下： + +![Flutter Event Loop]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/FlutterSingleThread1.png) + +为什么需要异步？因为大多数场景下 应用都并不是一直在做运算。比如一边等待用户的输入，输入后再去参与运算。这就是一个 IO 的场景。所以单线程可以再等待的时候做其他事情，而当真正需要处理运算的时候，再去处理。因此虽是单线程，但是给我们的感受是同事在做很多事情（空闲的时候去做其他事情） + + + +某个任务涉及 IO 或者异步，则主线程会先去做其他需要运算的事情，这个动作是靠 event loop 驱动的。和 JS 一样，dart 中存储事件任务的角色是事件队列 event queue。 + +Event queue 负责存储需要执行的任务事件，比如 DB 的读取。 + +Dart 中存在2个队列，一个微任务队列（Microtask Queue）、一个事件队列（Event Queue）。 + +Event loop 不断的轮询，先判断微任务队列是否为空，从队列头部取出需要执行的任务。如果微任务队列为空，则判断事件队列是否为空，不为空则从头部取出事件（比如键盘、IO、网络事件等），然后在主线程执行其回调函数，如下： + +![Flutter 单线程模型]((https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/2021-06-20-FlutterSingleThread2.png) + +### 2. 异步任务 + +微任务，即在一个很短的时间内就会完成的异步任务。微任务在事件循环中优先级最高，只要微任务队列不为空，事件循环就不断执行微任务，后续的事件队列中的任务持续等待。微任务队列可由 `scheduleMicroTask` 创建。 + +通常情况，微任务的使用场景比较少。Flutter 内部也在诸如手势识别、文本输入、滚动视图、保存页面效果等需要高优执行任务的场景用到了微任务。 + +所以，一般需求下，异步任务我们使用优先级较低的 Event Queue。比如 IO、绘制、定时器等，都是通过事件队列驱动主线程来执行的。 + + + +Dart 为 Event Queue 的任务提供了一层封装，叫做 Future。把一个函数体放入 Future 中，就完成了同步任务到异步任务的包装（类似于 iOS 中通过 GCD 将一个任务以同步、异步提交给某个队列）。Future 具备链式调用的能力，可以在异步执行完毕后执行其他任务（函数）。 + +看一段具体代码： + +```dart +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.dart +normal task 1 +normal task 2 +Task1 Future 1 +Task1 Future 2 +subTask 1 +subTask 2 +``` + +main 方法内，先添加了1个普通同步任务，然后以 Future 的形式添加了1个异步任务，Dart 会将异步任务加入到事件队列中，然后理解返回。后续代码继续以同步任务的方式执行。然后再添加了1个普通同步任务。然后再以 Future 的方式添加了1个异步任务，异步任务被加入到事件队列中。此时，事件队列中存在2个异步任务，Dart 在事件队列头部取出1个任务以同步的方式执行，全部执行（先进先出）完毕后再执行后续的 then。 + +Future 与 then 公用1个事件循环。如果存在多个 then，则按照顺序执行。 + +例2: + +```dart +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.dart +Task1 Future 1 +Task1 Future 2 +Task1 Future 3 +subTask 1 in Future 3 +subTask 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，以便下一轮事件循环中被执行。 + +综合例子 + +```dart +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.dart +normal Task +Microtask 2 +Task1 Future 1 +Task1 Future 2 +Task1 Future 3 +subTask 1 Future 3 +subTask 3 Future 3 +Microtask 1 +Task1 Future 4 +Task1 Future 5 +sub subTask 1 Future 4 +sub subTask 2 Future 4 +``` + +解释： + +- Event Loop 优先执行 main 方法同步任务，再执行微任务，最后执行 Event Queue 的异步任务。所以 normal Task 先执行 +- 同理微任务 Microtask 2 执行 +- 其次，Event Queue FIFO，Task1 Future 1 被执行 +- fx Future 内部为空，所以 then 里的内容被加到微任务队列中去，微任务优先级最高，所以 Task1 Future 2 被执行 +- 其次，Task1 Future 3 被执行。由于存在2个 then，先执行第一个 then 中的 subTask 1 Future 3，然后遇到微任务，所以 Microtask 1 被添加到微任务队列中去，等待下一次 Event Loop 到来时触发。接着执行第二个 then 中的 subTask 3 Future 3。随着下一次 Event Loop 到来，Microtask 1 被执行 +- 其次，Task1 Future 4 被执行。随后的第一个 then 中的任务又是被 Future 包装成一个异步任务，被添加到 Event Queue 中，第二个 then 中的内容也被添加到 Event Queue 中。 +- 接着，执行 Task1 Future 5。本次事件循环结束 +- 等下一轮事件循环到来，打印队列中的 sub subTask 1 Future 4、sub subTask 1 Future 5. + + + + + +### 3. 异步函数 + +异步函数的结果在将来某个时刻才返回，所以需要返回一个 Future 对象，供调用者使用。调用者根据需求，判断是在 Future 对象上注册一个 then 等 Future 执行体结束后再进行异步处理，还是同步等到 Future 执行结束。Future 对象如果需要同步等待，则需要在调用处添加 **await**，且 Future 所在的函数需要使用 **async** 关键字。 + +await 并不是同步等待，而是异步等待。Event Loop 会将调用体所在的函数也当作异步函数，将等待语句的上下文整体添加到 Event Queue 中，一旦返回，Event Loop 会在 Event Queue 中取出上下文代码，等待的代码继续执行 + +```dart +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.dart +Task1 Future 1 +Task1 Future 2 +subTask 1 Future 2 +subTask 2 Future 2 +``` + +解析： + +- Future 中的 Task1 Future 1 被添加到 Event Queue 中。其次遇到第一个 then，then 里面是 Future 包装的异步任务，所以 `Future(() => print("subTask 1 Future 2"))` 被添加到 Event Queue 中，所在的 await 函数也被添加到了 Event Queue 中。第二个 then 也被添加到 Event Queue 中 +- 第二个 Future 中的 'Task1 Future 2 不会被 await 阻塞，因为 await 是异步等待（添加到 Event Queue）。所以执行 'Task1 Future 2。随后执行 "subTask 1 Future 2，接着取出 await 执行 subTask 2 Future 2 + + + +### 4. Isolate + +Dart 为了利用多核 CPU，将 CPU 层面的密集型计算进行了隔离设计，提供了多线程机制，即 Isolate。每个 Isolate 资源隔离，都有自己的 Event Loop 和 Event Queue、Microtask Queue。Isolate 之间的资源共享通过消息机制通信（和进程一样） + + + +使用很简单，创建时需要传递一个参数。 + +```dart +void coding(language) { + print("hello " + language); +} +void main() { + Isolate.spawn(coding, "Dart"); +} +lbp@MBP  ~/Desktop  dart index.dart +hello Dart +``` + +大多数情况下，不仅仅需要并发执行。可能还需要某个 Isolate 运算结束后将结果告诉主 Isolate。可以通过 Isolate 的管道（SendPort）实现消息通信。可以在主 Isolate 中将管道作为参数传递给子 Isolate，当子 Isolate 运算结束后将结果利用这个管道传递给主 Isolate + +```dart +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.dart +data: 3 +``` + + + +此外 Flutter 中提供了执行并发计算任务的快捷方式-**compute 函数**。其内部对 Isolate 的创建和双向通信进行了封装。 + +计算阶乘： + +```dart +int testCompute() async { + return await compute(syncCalcuateFactorial, 100); +} + +int syncCalcuateFactorial(upperBounds) => upperBounds < 2 + ? upperBounds + : upperBounds * syncCalcuateFactorial(upperBounds - 1); +``` + +总结： + +- Dart 是单线程的，但通过事件循环可以实现异步 +- Future 是异步任务的封装，借助于 await 与 async，我们可以通过事件循环实现非阻塞的同步等待 +- Isolate 是 Dart 中的多线程，可以实现并发，有自己的事件循环与 Queue，独占资源。Isolate 之间可以通过消息机制进行单向通信，这些传递的消息通过对方的事件循环驱动对方进行异步处理。 +- flutter 提供了 CPU 密集运算的 compute 方法，内部封装了 Isolate 和 Isolate 之间的通信 +- 事件队列、事件循环的概念在 GUI 系统中非常重要，几乎在前端、Flutter、iOS、Android 甚至是 NodeJS 中都存在。 diff --git a/assets/2021-06-18-SingleThread5.png b/assets/2021-06-18-SingleThread5.png index 45e110c..edc9acb 100644 Binary files a/assets/2021-06-18-SingleThread5.png and b/assets/2021-06-18-SingleThread5.png differ diff --git a/assets/2021-06-19-SingleThread6.png b/assets/2021-06-19-SingleThread6.png new file mode 100644 index 0000000..4390918 Binary files /dev/null and b/assets/2021-06-19-SingleThread6.png differ diff --git a/assets/2021-06-19-SingleThread7.png b/assets/2021-06-19-SingleThread7.png new file mode 100644 index 0000000..25defcb Binary files /dev/null and b/assets/2021-06-19-SingleThread7.png differ diff --git a/assets/2021-06-20-FluitterSingleThread3.png b/assets/2021-06-20-FluitterSingleThread3.png new file mode 100644 index 0000000..f39686e Binary files /dev/null and b/assets/2021-06-20-FluitterSingleThread3.png differ diff --git a/assets/2021-06-20-FlutterSingleThread2.png b/assets/2021-06-20-FlutterSingleThread2.png new file mode 100644 index 0000000..2fcdc0c Binary files /dev/null and b/assets/2021-06-20-FlutterSingleThread2.png differ diff --git a/assets/FlutterSingleThread1.png b/assets/FlutterSingleThread1.png new file mode 100644 index 0000000..5916346 Binary files /dev/null and b/assets/FlutterSingleThread1.png differ