问题是这样出现的，一个实时聊天app，在性能较差的手机上，一次性发送多张图片，Image.file组件加载居然有明显的延迟！
具体表现为先出现一个空白区域，然后图片才会在空白区域慢慢渲染出来
而且我寻遍百度谷歌都没有人遇到相同的问题，难道这个bug只有我遇到了？
首先来看下面两段代码：
分别在forEach循环和for循环中执行await会有什么区别呢？
代码1(forEach)：
import 'dart:async';
import 'dart:io';
void main() async {
Completer<int> completer;
print('main begin');
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].forEach((element) async {
var t = await test(element);
print('t:$t,index:$element');
});
print('main end');
}
Future<int> test(int i) async {
print('test-$i begin');
await sleep(Duration(seconds: 1));
print('test-$i end');
return 1;
}
输出：
main begin
test-1 begin
test-2 begin
test-3 begin
test-4 begin
test-5 begin
test-6 begin
test-7 begin
test-8 begin
test-9 begin
test-10 begin
main end
test-1 end
t:1,index:1
test-2 end
t:1,index:2
test-3 end
t:1,index:3
test-4 end
t:1,index:4
test-5 end
t:1,index:5
test-6 end
t:1,index:6
test-7 end
t:1,index:7
test-8 end
t:1,index:8
test-9 end
t:1,index:9
test-10 end
t:1,index:10
代码2(for)：
import 'dart:async';
import 'dart:io';
void main() async {
Completer<int> completer;
print('main begin');
for (int i = 1; i < 11; i++) {
var t = await test();
print('t:$t,index:$i');
}
print('main end');
}
Future<int> test(int i) async {
print('test-$i begin');
// Future.delayed(Duration(seconds: 3), () {
// print('after 3s');
// });
await sleep(Duration(seconds: 1));
print('test-$i end');
return 1;
}
输出：
main begin
test begin
test end
t:1,index:1
test begin
test end
t:1,index:2
test begin
test end
t:1,index:3
test begin
test end
t:1,index:4
test begin
test end
t:1,index:5
test begin
test end
t:1,index:6
test begin
test end
t:1,index:7
test begin
test end
t:1,index:8
test begin
test end
t:1,index:9
test begin
test end
t:1,index:10
main end
看到结果了吗！？
await在forEach中不会等待！！！
那么这和Image.file又有什么关系呢？
这就要从我处理的项目说起了，
实时聊天app，在相册选取图片时最多可以选择九张，返回之后在forEach中：
result.forEach((e){
var message = e as Message;
await sendMessage(message)
}
void sendMessage(msg){
awiat db.insert(msg) /// 消息插入数据库
messageList.add(msg) /// 消息塞入消息队列,这一步结束后渲染Image.file
}
图片消息进入数据队列后会自动渲染成Image.file
现在我们知道forEach中不会等待await
所以它会连续执行九次sendMessage() 而在sendMessage里面又会正常等待
awiat db.insert(msg) /// 消息插入数据库
等待完成后开始渲染图片 messageList.add(msg) /// 消息塞入消息队列,这一步结束后渲染Image.file
这样第一张图片的消息入库、塞入消息队列后，开始渲染第一张图片
此时后面八张图片还在入库！！！ 所以Image.file()组件渲染就会卡顿！！！
就会出现令我百思不得其解的现象：Image.file()加载图片为什么这么慢！！！
但是现在我们知道了forEach中awiat不会等待，那把forEach换成for循环不就好了？
可惜还是不行
因为Image.file加载也是需要耗时的，这样第一张图片的Image.file渲染时，会同步执行第二张图片的awiat db.insert(msg) /// 消息插入数据库
虽然这样Image.file组件加载会比forEach的情况有所好转（至少不是与后续八张图片的入库同时进行）
但还是会有所卡顿
那我们要怎么做才好呢？
很简单————去掉消息插入数据库的await
将awiat db.insert(msg) /// 消息插入数据库 改成db.insert(msg) /// 消息插入数据库
这样虽然不会等待消息入库，看起来还是要同时进行入库与图片渲染
但是flutter会自动优先进行组间的渲染
这样就Image.file加载就不会那么慢了~
当然 这样有可能消息入库失败但在页面上已经加载出来了
更好的解决方法是使用一个消息缓冲池 一个图片渲染完毕后下一个图片再入库进消息队列
