, recruiting
We urgently need the talents of browser rendering engine /Flutter rendering engine. WelcomeJoin us_.
preface
Flutter is arguably the most popular mobile cross-platform solution in the last two years. Both innovative and old-line flagship apps are trying Flutter technology to some extent. Flutter is gaining its luster based on the following three advantages:
- Unlike Weex and RN, Flutter uses self-rendering to achieve a high degree of cross-platform consistency.
- Simplified rendering pipeline design and extreme AOT provide performance comparable to Native;
- Google’s strong technical support and rapidly expanding ecosystem.
Although Flutter looks wonderful, it is still a potential newborn. With the gradual in-depth use of business, business students encountered some difficult problems with Flutter, which needed to be optimized and reformed from the engine level. Therefore, the U4 kernel team also began to throw itself into the torrent of Flutter, hoping to bring better business experience through the team’s technology.
To facilitate communication and differentiation, our Flutter custom engine is codenamed Hummer. The Flutter of the Flutter of the wings, Google, and Hummer are the fastest and smallest birds in the world. We hope that the U4 kernel team can customize the Flutter engine to be as small and fast as the hummingbird, while at the same time helping businesses develop applications as beautiful as the hummingbird.
The overview
Hummer engine is business driven as the core, combined with the U4 kernel team for years of Web engine development experience, and actively embrace the community, mainly from the performance optimization, function enhancement, supporting tools, problem solving four aspects of deep customization and optimization. Below is a brief introduction of our nearly completed or completed optimization results, these results will be later on the public account to share with readers, please pay attention to.
Important achievements
AOT compiler based on LLVM
The Dart AOT product is optimized to match the performance of older languages like Java and C++, but there is still room for improvement in the pipeline. We modified the Dart compiler to take advantage of the LLVM compiler’s ability to generate code with small size and high performance, effectively reducing engine output size and improving code performance.
Our goals are:
- AOT generated code performance increased by 30%
- AOT code generation size reduced by 30%
Arm32 and ARM64 have passed all the tests and are entering the final optimization stage. They will be available soon.
At present, the official is also paying attention to the optimization work of our compiler, hoping to contribute to the community once the results are achieved.
Optimization of hybrid stack development scheme
Although Flutter officially supports hybrid development with Native apps, Flutter’s support for hybrid development has not been friendly enough so far, and some of its problems have been a sore point for developers. Mixed development is mainly reflected in three scenarios:
- Native controls are embedded in some areas of the full-screen Flutter interface.
- Cross-navigation switch between full-screen Flutter interface and full-screen Native interface;
- In the full-screen Native interface, part of the Flutter control is embedded.
For the first scene, we solved the problem of poor performance and compatibility of the original mixed rendering scheme by digging holes in the mixed rendering method. In the test scenario, the optimal frame rate of FlutterView was up to 28%, and that of embedded PlatformView was up to 50%.
In the following video, the left side shows the effect before optimization and the right side shows the effect after optimization.
For the second scenario, the existing mainstream scheme was found to be difficult to upgrade after evaluation by the team. In addition to reference existing solutions to provide similar capabilities, Hummer will also focus on how to reduce Hummer’s upgrade costs and ensure that Hummer is able to keep up with the latest official releases. For the third scenario, we will combine the official Multiple Flutters scheme to start the engine level transformation, hoping to achieve the following goals:
- FlutterView can be flexibly used in various scenarios, such as full-screen and embedded as Tab, Card, Cell, etc.
- Creating 2+ FlutterView has a small extra occupation of system resources and memory, and the initialization cost is smaller. Therefore, applications can use multiple FlutterViews at the same time with greater confidence.
- Provide an effective peak memory control mechanism in complex business scenarios, reduce business concerns about memory usage, and do not need to modify the code of the Flutter App.
- Provide a set of apis in the Framework and container layers to enable data sharing (between Flutter Apps and between Flutter and Native).
Startup and first frame performance optimization
We optimized the Hummer engine for startup and first frame. The optimized engine brings significant performance improvements to the real business. Actual service statistics show that the startup time is reduced by 80% and the first frame time is reduced by 60%.
Adaptive DarkMode solution
The adaptive DarkMode scheme of benchmarking Chromium enables the interface to switch DarkMode with one click without the need to redesign the theme, which greatly improves the r&d efficiency of the business side.
Below is the effect of using the open source Flutter_deer project to add DarkMode’s extended syntax to Hummer. Interested readers can also see for themselves the effects of DarkMode implemented by the project itself.
Network library enhancement scheme
The Hummer engine can double the speed of network requests by connecting to external network libraries instead of relying on native network libraries.
The related PR
Although I have not been involved in the optimization of the Flutter engine for a long time, the U4 kernel team has submitted PR to the mainline several times, most of which has now been incorporated. In this way, we hope to enhance alibaba’s influence in the Flutter community and promote the development of the whole Flutter ecosystem, so that Flutter can bring greater value to the business side.
In the future
U4 kernel team, focus on rendering engine & virtual machine technology for more than ten years. As an important participant of Flutter, Alibaba Group actively embraces the community and strives to bring maximum value to the business. Hummer is our deeply customized optimization of the Flutter engine, incorporating the team’s years of expertise on the Web engine. Students who are engaged in the research of related technologies or based on the application of Flutter construction are welcome to give their valuable opinions or suggestions.
The U4 kernel is committed to creating the best performance, the most secure web platform, so that the Web can do anything.
Please search for U4 kernel technology and get the latest technology updates immediately
