lynx-family/lynx

[Performance]: Jank Frame between list scrolling

Open

#194 opened on Mar 7, 2025

View on GitHub
 (2 comments) (0 reactions) (2 assignees)C++ (14,882 stars) (527 forks)user submission
help wanted

Description

System Info

Plaform: Android (not sure whether iOS has the same issue)

Details

I made a list scrolling case (simplify from https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js) to compare with react native but found more jank frame in the profile.

I am not sure the root case but it looks like View#onTouchEvent, animation slice is longer than expected or react-native

Reproduce link

https://github.com/ArrayZoneYour/lynx-tester

Reproduce Steps

  1. Use client repo from https://github.com/ArrayZoneYour/integrating-lynx-demo-projects and modify the url to 204.lynx.bundle or recompile project from lynx-tester above.

  2. Trace the application

./record_android_trace -o trace_file.perfetto-trace -t 300s -b 640mb \
sched freq idle am wm gfx view binder_driver hal dalvik camera input res memory -a com.lynx.kotlinemptyproject
  1. Then scroll from top to end. Ctrl + C to Get the trace.

Contributor guide

Tech stack
cppandroidjavascript
Domain
performance
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Android developmentPerformance profilinglynx framework basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
15
Research direction
Investigate the performance of list scrolling in lynx on Android. Use the trace steps provided to capture a profile, focusing on the long `View#onTouchEvent` and `animation` slices. Compare with React Native's FlatList implementation and examine the lynx Android rendering module's source code for potential bottlenecks in UI thread updates.