Performance Optimization of Xianyu Flutter App: Smoothness, Load Time, and Rendering Improvements

Background: Xianyu's main business (search, detail pages) is built with Flutter. Although Flutter offers high performance, rapid business iteration caused issues such as slow startup, long page loading, and janky scrolling.

The project tackled three key areas: smoothness optimization, search‑result page load optimization, and detail‑page load optimization.

Smoothness Optimization

We built a custom Flutter lag‑diagnosis tool that captures native stacks via signals and maps them back to Flutter stacks. Two major causes were identified:

Time‑consuming functions (e.g., channel serialization/deserialization, empty native implementation of resumeImage ).

Over‑rendering due to the centralized, asynchronous rendering mechanism, which marks many elements dirty and rebuilds large widget trees.

By improving build efficiency, moving setState down to leaf widgets, and extracting labels into separate stateful widgets, we reduced unnecessary rebuilds.

Long List Load‑More Optimization

During scroll, the load‑more operation triggered a full list container rebuild via setState . We deferred the state update until the user reached the bottom and modified the list container to avoid dirtying the whole widget, resulting in smoother scrolling.

Small Image Loading During Fast Scroll

In fast scrolling scenarios we load low‑resolution blurred images first and replace them with high‑resolution versions after scrolling stops, reducing memory and I/O pressure on low‑end devices.

Search Result Page Load Optimization

We introduced parallel data prefetch and template preloading, and displayed a Lottie skeleton screen while waiting for network responses. This reduced the search‑result page load time by about 300 ms on low‑end Android devices.

Detail Page Load Optimization

FlutterBoost optimization: reuse a single Flutter container (Activity/ViewController) for multiple pages to speed up navigation and lower memory usage.

Data pass‑through: transmit already‑available data (e.g., main image, title, price) to the detail page to show content instantly while the full data loads.

Transition animation: implement immersive page‑switch animations by overriding ModalRoute and animating a simplified detail page before mounting the full page.

After these optimizations, FPS increased by ~3 points, large‑jank occurrences were cut by half on low‑end devices, and high‑end devices consistently achieved FPS ≥57.

Future work includes deeper Flutter engine startup optimization and integrating performance gates into the CI pipeline to prevent regressions.