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

文章主题是“单线程模型下如何保证 UI 的流畅性”。该话题针对的是 flutter 性能原理展开的，但是 dart 语言就是 js 的延伸，很多概念和机制都是一样的。具体不细聊。此外 js 也是单线程模型，在界面展示和 IO 等方面和 dart 类似。所以结合对比讲一下，帮助梳理和类比，更加容易掌握本文的主题，和知识的横向拓展。

先从前端角度出发，分析下 event loop 和事件队列模型。再从 flutter 层出发聊聊 dart 侧的事件队列和同步异步任务之间的关系。

一、单线程模型的设计

1. 最基础的单线程处理简单任务

假设有几个任务：

任务1: "姓名：" + "杭城小刘"
任务2: "年龄：" + "1995" + "02" + "20"
任务3: "大小：" + (2021 - 1995 + 1)
任务4: 打印任务1、2、3 的结果

在单线程中执行，代码可能如下：

//c
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);
}

线程开始执行任务，按照需求，单线程依次执行每个任务，执行完毕后线程马上退出。

2. 线程运行过程中来了新的任务怎么处理？

问题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);
  }
}