각각의 api를 await으로 직렬 요청하게 되면 전체 api 호출 시간이 길어진다.
특히 여러 api를 필요로 하는 스크린이라면 앱이 더욱 느려진다.
이때 비동기 작업을 병렬처리하면 속도 개선이 가능하다.
병렬처리로 속도 개선이 가능한 이유?
모든 작업에 await을 붙여 순차 실행을 보장하면 모든 api 콜이 완료된 후에 화면 랜더링이 시작되기 때문에 속도가 느려진다.
비동기 직렬처리 예시)
final example1 = await repository.example1();
final example2 = await repository.example2();
final example3 = await repository.example3();
final example4 = await repository.example4();
비동기 병렬처리 예시)
final requests = [
repository.example1(),
repository.example2(),
repository.example3(),
repository.example4(),
];
final res = await Future.wait<dynamic>(
requests.map((e) async {
try {
return await e;
} catch (_) {
return null;
}
}),
);병렬처리한 예시의 경우 await 없이 함수를 먼저 실행하기 때문에 각 작업이 즉시 실행된다. (서버 전송)
그리고 Future.wait으로 모든 api 결과를 한번에 기다린 후 처리한다. (await으로 모든 furue 함수의 완료를 기다린다.)
즉, await을 바로 사용하면 그 결과를 기다렸다가 다음으로 넘어가서 직렬 실행이 되는 반면, Future.wait으로 기다렸다가 한번에 실행하는 것이다.
- 화면 랜더링까지 0.5~0.6초 정도 소요되던 작업이 병렬처리 후 0.2~0.3초 정도로 크게 단축됐다.
- 로그인 같은 특정 조건이 있을 때만 호출이 필요한 api의 경우 분기처리를 통해 불필요한 호출을 방지하면 속도 개선에 도움이 된다.
- 참고로 속도 측정은 api 콜이 시작하고 끝나는 지점, 전체 api가 끝나는 지점에 DateTime.now로 타임스탬프를 찍어보면 간단하게 측정이 가능하다.
