Optimizing MTFlexbox Performance with Litho in Meituan App

Litho is a declarative UI framework designed to improve the scrolling performance of complex RecyclerView lists. MTFlexbox is Meituan's cross‑platform dynamic layout solution that follows the CSS Flexbox specification but suffers from deep view hierarchies and long view‑generation times.

The article first introduces MTFlexbox’s architecture (template download, parsing, view rendering, custom tag extension) and identifies two main performance problems: (1) excessive view‑hierarchy depth causing frame drops, and (2) costly view generation due to template download, parsing, and JSON data binding.

To address problem 1, Litho’s layout flattening replaces the original view engine. The node tree is converted into a Litho component tree, which is then rendered by LithoView. Several challenges are discussed, including view reuse with data updates, lack of layer‑stacking support, image loading, and custom‑tag compatibility. Solutions involve a state‑based updater component, a custom Layer component that bypasses Yoga’s layout constraints, using FrescoImage for network images, and wrapping existing business Views inside Litho components.

For problem 2, the conversion from MTFlexbox templates to Litho components is performed asynchronously on a background thread, so the heavy parsing work is completed before the view is needed, eliminating main‑thread blocking.

Performance measurements show that the Litho‑based implementation reduces view‑hierarchy depth, saves over 30 MB of memory on the Meituan homepage, and eliminates FPS spikes on low‑end devices. The article concludes with future work such as pre‑rendering bitmaps, further RecyclerView API refinements, and handling click/analytics events.