mirror of
https://github.com/NohamR/knowledge-kit.git
synced 2026-05-25 04:17:17 +00:00
docs: 汇编研究
This commit is contained in:
LiuBinPeng
@@ -1,13 +1,9 @@
|
||||
# 从 Flutter 和前端角度出发，聊聊单线程模型下如何保证 UI 流畅性
|
||||
|
||||
|
||||
|
||||
> 文章主题是“单线程模型下如何保证 UI 的流畅性”。该话题针对的是 Flutter 性能原理展开的，但是 dart 语言就是 js 的延伸，很多概念和机制都是一样的。具体不细聊。此外 js 也是单线程模型，在界面展示和 IO 等方面和 dart 类似。所以结合对比讲一下，帮助梳理和类比，更加容易掌握本文的主题，和知识的横向拓展。
|
||||
>
|
||||
>
|
||||
> 先从前端角度出发，分析下 event loop 和事件队列模型。再从 Flutter 层出发聊聊 dart 侧的事件队列和同步异步任务之间的关系。
|
||||
|
||||
|
||||
|
||||
## 一、单线程模型的设计
|
||||
|
||||
### 1. 最基础的单线程处理简单任务
|
||||
@@ -27,7 +23,7 @@ void mainThread () {
|
||||
string name = "姓名：" + "杭城小刘";
|
||||
string birthday = "年龄：" + "1995" + "02" + "20"
|
||||
int age = 2021 - 1995 + 1;
|
||||
printf("个人信息为：%s, %s, 大小：%d", name.c_str(), birthday.c_str(), age);
|
||||
printf("个人信息为：%s, %s, 大小：%d", name.c_str(), birthday.c_str(), age);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -35,8 +31,6 @@ void mainThread () {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2. 线程运行过程中来了新的任务怎么处理？
|
||||
|
||||
问题1 介绍的线程模型太简单太理想了，不可能从一开始就 n 个任务就确定了，大多数情况下，会接收到新的 m 个任务。那么 section1 中的设计就无法满足该需求。
|
||||
@@ -69,26 +63,18 @@ void mainThread () {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 3. 处理来自其他线程的任务
|
||||
|
||||
真实环境中的线程模块远远没有这么简单。比如浏览器环境下，线程可能正在绘制，可能会接收到1个来自用户鼠标点击的事件，1个来自网络加载 css 资源完成的事件等等。第二版线程模型虽然引入了事件循环机制，可以接受新的事件任务，但是发现没？这些任务之来自线程内部，该设计是无法接受来自其他线程的任务的。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
从上图可以看出，渲染主线程会频繁接收到来自于 IO 线程的一些事件任务，当接受到的资源加载完成后的消息，则渲染线程会开始 DOM 解析；当接收到来自鼠标点击的消息，渲染主线程则会执行绑定好的鼠标点击事件脚本（js）来处理事件。
|
||||
|
||||
需要一个合理的数据结构，来存放并获取其他线程发送的消息？
|
||||
|
||||
**消息队列**这个词大家都听过，在 GUI 系统中，事件队列是一个通用解决方案。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**消息队列（事件队列）是一种合理的数据结构。要执行的任务添加到队列的尾部，需要执行的任务，从队列的头部取出。**
|
||||
@@ -97,8 +83,6 @@ void mainThread () {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
可以看出改造分为3个步骤：
|
||||
|
||||
- 构建一个消息队列
|
||||
@@ -122,8 +106,8 @@ TaskQueue taskQueue;
|
||||
void processTask ();
|
||||
void mainThread () {
|
||||
while (true) {
|
||||
Task task = taskQueue.fetchTask();
|
||||
processTask(task);
|
||||
Task task = taskQueue.fetchTask();
|
||||
processTask(task);
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -139,16 +123,12 @@ void handleIOTask () {
|
||||
|
||||
Tips: 事件队列是存在多线程访问的情况，所以需要加锁。
|
||||
|
||||
|
||||
|
||||
### 4. 处理来自其他线程的任务
|
||||
|
||||
|
||||
|
||||
浏览器环境中， 渲染进程经常接收到来自其他进程的任务，IO 线程专门用来接收来自其他进程传递来的消息。IPC 专门处理跨进程间的通信。
|
||||
|
||||
|
||||
|
||||
### 5. 消息队列中的任务类型
|
||||
|
||||
消息队列中有很多消息类型。内部消息：如鼠标滚动、点击、移动、宏任务、微任务、文件读写、定时器等等。
|
||||
@@ -157,46 +137,36 @@ Tips: 事件队列是存在多线程访问的情况，所以需要加锁。
|
||||
|
||||
上述事件都是在渲染主线程中执行的，因此编码时需注意，尽量减小这些事件所占用的时长。
|
||||
|
||||
|
||||
|
||||
### 6. 如何安全退出
|
||||
|
||||
Chrome 设计上，确定要退出当前页面时，页面主线程会设置一个退出标志的变量，每次执行完1个任务时，判断该标志。如果设置了，则中断任务，退出线程
|
||||
|
||||
|
||||
|
||||
### 7. 单线程的缺点
|
||||
|
||||
事件队列的特点是先进先出，后进后出。那后进的任务也许会被前面的任务因为执行时间过长而阻塞，等待前面的任务执行完毕才可以执行后面的任务。这样存在2个问题。
|
||||
|
||||
- 如何处理高优先级的任务
|
||||
|
||||
|
||||
假如要监控 DOM 节点的变化情况（插入、删除、修改 innerHTML），然后触发对应的逻辑。最基础的做法就是设计一套监听接口，当 DOM 变化时，渲染引擎同步调用这些接口。不过这样子存在很大的问题，就是 DOM 变化会很频繁。如果每次 DOM 变化都触发对应的 JS 接口，则该任务执行会很长，导致**执行效率**的降低
|
||||
|
||||
|
||||
如果将这些 DOM 变化做为异步消息，假如消息队列中。可能会存在因为前面的任务在执行导致当前的 DOM 消息不会被执行的问题，也就是影响了监控的**实时性**。
|
||||
|
||||
|
||||
如何权衡效率和实时性？**微任务** 就是解决该类问题的。
|
||||
|
||||
|
||||
通常，我们把消息队列中的任务成为**宏任务**，每个宏任务中都包含一个**微任务队列**，在执行宏任务的过程中，假如 DOM 有变化，则该变化会被添加到该宏任务的微任务队列中去，这样子效率问题得以解决。
|
||||
|
||||
|
||||
当宏任务中的主要功能执行完毕欧，渲染引擎会执行微任务队列中的微任务。因此实时性问题得以解决
|
||||
|
||||
|
||||
|
||||
- 如何解决单个任务执行时间过长的问题
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
可以看出，假如 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 微任务队列**。如下：
|
||||
@@ -205,8 +175,6 @@ Dart 是单线程的，也就是代码会有序执行。此外 Dart 作为 Flutt
|
||||
|
||||
为什么需要异步？因为大多数场景下 应用都并不是一直在做运算。比如一边等待用户的输入，输入后再去参与运算。这就是一个 IO 的场景。所以单线程可以再等待的时候做其他事情，而当真正需要处理运算的时候，再去处理。因此虽是单线程，但是给我们的感受是同事在做很多事情（空闲的时候去做其他事情）
|
||||
|
||||
|
||||
|
||||
某个任务涉及 IO 或者异步，则主线程会先去做其他需要运算的事情，这个动作是靠 event loop 驱动的。和 JS 一样，dart 中存储事件任务的角色是事件队列 event queue。
|
||||
|
||||
Event queue 负责存储需要执行的任务事件，比如 DB 的读取。
|
||||
@@ -225,8 +193,6 @@ Event loop 不断的轮询，先判断微任务队列是否为空，从队列头
|
||||
|
||||
所以，一般需求下，异步任务我们使用优先级较低的 Event Queue。比如 IO、绘制、定时器等，都是通过事件队列驱动主线程来执行的。
|
||||
|
||||
|
||||
|
||||
Dart 为 Event Queue 的任务提供了一层封装，叫做 Future。把一个函数体放入 Future 中，就完成了同步任务到异步任务的包装（类似于 iOS 中通过 GCD 将一个任务以同步、异步提交给某个队列）。Future 具备链式调用的能力，可以在异步执行完毕后执行其他任务（函数）。
|
||||
|
||||
看一段具体代码：
|
||||
@@ -325,10 +291,6 @@ sub subTask 2 Future 4
|
||||
- 接着，执行 Task1 Future 5。本次事件循环结束
|
||||
- 等下一轮事件循环到来，打印队列中的 sub subTask 1 Future 4、sub subTask 1 Future 5.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 3. 异步函数
|
||||
|
||||
异步函数的结果在将来某个时刻才返回，所以需要返回一个 Future 对象，供调用者使用。调用者根据需求，判断是在 Future 对象上注册一个 then 等 Future 执行体结束后再进行异步处理，还是同步等到 Future 执行结束。Future 对象如果需要同步等待，则需要在调用处添加 **await**，且 Future 所在的函数需要使用 **async** 关键字。
|
||||
@@ -356,14 +318,10 @@ 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
|
||||
@@ -393,7 +351,7 @@ void main() {
|
||||
testIsolate() async {
|
||||
ReceivePort receivePort = ReceivePort(); // 创建管道
|
||||
Isolate isolate = await Isolate.spawn(coding, receivePort.sendPort); // 创建 Isolate，并传递发送管道作为参数
|
||||
// 监听消息
|
||||
// 监听消息
|
||||
receivePort.listen((message) {
|
||||
print("data: $message");
|
||||
receivePort.close();
|
||||
@@ -405,8 +363,6 @@ lbp@MBP ~/Desktop dart index.dart
|
||||
data: 3
|
||||
```
|
||||
|
||||
|
||||
|
||||
此外 Flutter 中提供了执行并发计算任务的快捷方式-**compute 函数**。其内部对 Isolate 的创建和双向通信进行了封装。
|
||||
|
||||
实际上，业务开发中使用 compute 的场景很少，比如 JSON 的编解码可以用 compute。
|
||||
@@ -430,46 +386,3 @@ int syncCalcuateFactorial(upperBounds) => upperBounds < 2
|
||||
- Isolate 是 Dart 中的多线程，可以实现并发，有自己的事件循环与 Queue，独占资源。Isolate 之间可以通过消息机制进行单向通信，这些传递的消息通过对方的事件循环驱动对方进行异步处理。
|
||||
- flutter 提供了 CPU 密集运算的 compute 方法，内部封装了 Isolate 和 Isolate 之间的通信
|
||||
- 事件队列、事件循环的概念在 GUI 系统中非常重要，几乎在前端、Flutter、iOS、Android 甚至是 NodeJS 中都存在。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user