[Flutter] 填坑：await、forEach、Image.file三者结合的奇妙巨坑

十三点47
1,206 阅读3分钟

问题是这样出现的，一个实时聊天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加载就不会那么慢了~

当然 这样有可能消息入库失败但在页面上已经加载出来了

更好的解决方法是使用一个消息缓冲池 一个图片渲染完毕后下一个图片再入库进消息队列

avatar
文章
阅读
粉丝