docs: 从 Flutter 和前端角度出发，聊聊单线程模型下如何保证 UI 流畅性

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 中都存在。