[D2] What makes Flutter fast

前端狗

2019/01/19 发布于 技术 分类

文字内容
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(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(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
15. Screenshot from Flutter 1.0 slides
16. Android Issues iOS Issues App Issues
17. ● Fewer to learn ● Fewer cognitive context or tool switches
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
24. 1 second animation before improvement:'>improvement: 30 frames of 16ms, 1 frame of 500ms animation after improvement:'>improvement: 30 frames of 16ms, 15 frames of 32ms
25. 1 second animation before improvement:'>improvement: 30 frames of 16ms, 1 frame of 500ms animation after improvement:'>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 的问题和反 馈?请填写下面表格与我们沟通