D2前端技术论坛

[D2] What makes Flutter fast

1. What makes Flutter fast Flutter 为何快 Yuqian Li 李宇骞 liyuqian@google.com Confidential + Proprietary
3. Build the best way to develop for mobile apps ……
4. Fast Development Native Performance
5. “ Screenshot taken from translate.google.com on 1/1/2019 ”
6. Less work 干活少 Better incentive 激励好
7. Less work 干活少 Less compute work Less engineer work Less developer work
8. Dart AOT: 0.15s C++: 0.28s import 'dart:typed_data'; const int T = 10000; const int N = 1000; const int T = 10000; const int N = 1000; main() { for(int t = 0; t < T; t++) { var objs = new List<Uint8List>(N); for(int i = 0; i < N; i++) { objs[i] = new Uint8List(10); } } } int main() { for(int t = 0; t < T; t++) { char* objs[N]; for(int i = 0; i < N; i++) { objs[i] = new char[10]; } for(int i = 0; i < N; i++) { delete [] objs[i]; } } } Java: 0.60s import java.util.ArrayList; final class jstr { public static void main(String[] args) { final int T = 10000; final int N = 1000; for(int t = 0; t < T; t++) { ArrayList objs[] = new ArrayList[N]; for(int i = 0; i < N; i++) { objs[i] = new ArrayList<Byte>(10); } } } } Experiments conducted on Linux x64 4.18.10, Intel(R) Xeon(R) CPU E5-2690 v4 @ 2.60GHz, Dart 2.2.0-edge.0797d6ef695739aafd3759096f4143c7440f0213, gcc version 7.3.0 (Debian 7.3.0-5) with -O3, openjdk version 1.8.0_161
9. Image / Icon 框架 框架 原生 From GDD China 2018 其它跨平台框架
10. Sizes/Layers Constraints/Offsets : RepaintBoundary one-pass, linear time layout and painting instead of O(n2) Tree diagrams copied from Xiao’s GDD China 2018 slides. : needs repaint
11. (newly added) Layer Cache 60% speedup in page transition animations. Picture Cache
12. ● ● Offscreen painting in Layer::Preroll instead of Layer::Paint Reduce the number of SkCanvas::saveLayer calls (& no clip by default) 2x speedup screenshot from GDD China 2018 slides
13. https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#lazy-programming
15. Screenshot from Flutter 1.0 slides
16. Android Issues iOS Issues App Issues
17. ● Fewer to learn ● Fewer cognitive context or tool switches
18. Full video here: https://www.bilibili.com/video/av40362171/
19. Better incentive 激励好 Better API Better metrics Better feedback
20. No synchronous slow work There should be no APIs that require synchronously completing an expensive operation (e.g. computing a full app layout outside of the layout phase). Expensive work should be asynchronous. Getters feel faster than methods Property getters should be efficient (e.g. just returning a cached value, or an O(1) table lookup). If an operation is inefficient, it should be a method instead. (Looking at the Web again: we would have document.getForms(), not document.forms, since it walks the entire tree). image = await renderRepaintBoundary.toImage(); https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#getters-feel-faster-than-methods https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#no-synchronous-slow-work
21. Avoid APIs that encourage bad practices For example, don’t provide APIs that walk entire trees, or that encourage O(N^2) algorithms, or that encourage sequential long-lived operations where the operations could be run concurrently. https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#avoid-apis-that-encourage-bad-practices
22. ● 2x speedup screenshot from GDD China 2018 slides
23. FPS: 67 https://commons.wikimedia.org/wiki/File:Nuclear_Dawn_-_Silo_FPS_01.png
24. 1 second animation before improvement: 30 frames of 16ms, 1 frame of 500ms animation after improvement: 30 frames of 16ms, 15 frames of 32ms
25. 1 second animation before improvement: 30 frames of 16ms, 1 frame of 500ms animation after improvement: 30 frames of 16ms, 15 frames of 32ms 90th percentile, 99th percentile, 100th percentile (worst) frame time
27. See the GIF here.
28. ● ● ● Remove files Shorten code Reduce dependencies
29. ● Less work ○ ○ ○ ● ○ ○ ○ Better API Better metrics Better feedback Don’t contribute Contribute 10, 10 -1, 0 Don’t contribute 0, -1 0, 0 干活少 Less compute work Less engineer work Less developer work Better incentive Contribute 激励好 谢谢! liyuqian@google.com
30. 反馈 & 了解更多 关注谷歌官方“谷歌开发者”微信 公众号了解更多 Flutter 动态 有任何关于 Flutter 的问题和反 馈?请填写下面表格与我们沟通

相关幻灯片