Performance Optimization of Long List Scrolling in Android and Flutter

During rapid feature iteration, the Xianyu app experienced degraded smoothness in long list scrolling, affecting user experience. Xianyu, a pioneer of Flutter in China, uses a hybrid architecture of Flutter and native Android. This article shares optimization ideas for native Android, Flutter pages, and the overall approach.

1. Overall Idea

The optimization workflow includes building smoothness metrics and detection tools, improving native Android long list performance, and optimizing Flutter long lists.

2. Smoothness Metrics and Detection Tool Construction

Existing Android tools are categorized as invasive (e.g., integrating SDK via Choreographer ), profile mode, and non‑invasive (e.g., adb shell dumpsys gfxinfo ${packageName} or Tencent GT service callSurfaceFlinger1013 ). Metrics include FPS, SkippedFrames (SF), Smoothness (SM = 60‑SF), and frame‑time percentiles.

Problems identified:

Multi‑platform support is lacking; no non‑invasive tool works across native, H5, RN, Weex, Flutter.

Metrics alone (average FPS) do not fully reflect user perception.

Scrolling speed and state (idle, drag, fling) heavily influence data.

We define two core metrics: average FPS and the number of >3‑frame stalls per second ("1s big‑jank count").

2.2 Tool Implementation

The tool records screen frames at 16.6 ms intervals, hashes each frame, and detects stalls when consecutive frames are identical. It runs in a separate process to avoid affecting the target app.

Key implementation steps:

Register a screen‑recording service and read frames in the tool’s frame callback.

Compress frames based on device capability to keep processing under 16.6 ms.

Use ADB scripts to automate scrolling actions.

3. Native Android Long List Optimization

Common techniques (layout hierarchy reduction, over‑draw elimination, etc.) are applied. Two specific improvements are highlighted:

Asynchronously build a view‑cache pool using AsyncLayoutInflater while removing its fallback to UI‑thread construction.

Introduce ViewDataUnbinder to separate UI operations from background work during onBindViewHolder , reducing UI‑thread load.

Results show noticeable FPS gains and reduced jank.

4. Flutter Complex Long List Optimization

Flutter’s perceived performance issues are addressed by:

Using official performance tools (DevTools, profile mode) to locate bottlenecks.

Checking widget rebuilds (e.g., FDButtonBar rebuilt frequently) via FlutterPerformance .

Leveraging fish‑redux performance logs.

Optimizing Clip layers by disabling debugDisableClipLayers and debugDisablePhysicalShapeLayers .

Applying render‑thread optimizations: using RepaintBoundary , avoiding Opacity , reducing saveLayer usage, etc.

Additional strategies include:

Splitting large widgets into placeholder frames and smaller sub‑widgets, then scheduling their builds across multiple frames (time‑slicing).

Custom scroll physics ( SmoothClampingScrollPhysics and SmoothBouncingScrollPhysics ) that prevent offset jumps during small stalls by switching from D/T to V/T curves.

Sample code snippet for custom distance calculation:

distance = velocity(time) * 16.6ms + distance

These changes reduced FPS drops and improved perceived smoothness, especially on low‑end devices.

5. Summary and Outlook

After applying the above optimizations, native Android list smoothness and content rendering improved significantly. Flutter pages (detail and search) saw a 3‑point FPS increase, halved big‑jank counts on low‑end phones, and achieved >57 FPS with near‑zero jank on mid‑high‑end devices.

Future work includes productizing the detection tool, extending the approach to other pages, early detection of rebuild issues, CI integration for smoothness regression, and automated widget time‑slicing for large business widgets.