Improving Comment Rendering on Android
Article Summary
Instagram's Android team faced a brutal problem: complex captions with emojis and links were causing 50ms UI thread blocks, making scrolling feel janky even on flagship devices.
The Instagram Engineering team tackled text rendering performance on Android, where long captions with emojis were dropping frames during feed scrolling. They implemented a series of optimizations to reduce jank by 60%.
Key Takeaways
- Text rendering took 50ms per caption, all on the UI thread
- Custom TextLayoutView replaced TextView to cache and reuse text.Layout objects
- Warming up TextLayoutCache on background threads cut draw time from 50ms to 2ms
- Preloading five stories ahead after scroll stops kept cache primed
- Final result: 60% fewer dropped frames and 50% less jitter
By caching text layouts and warming up Android's TextLayoutCache on background threads, Instagram reduced dropped frames by 60% and cut text drawing time from 50ms to under 6ms.
About This Article
Instagram's feed showed captions with the five most recent comments per post. On Android, measuring text for each caption took up to 30ms on the UI thread. This added up quickly when multiple comments appeared in a single feed view.
Instagram Engineering created a custom TextLayoutView that cut out unnecessary SpannableStringBuilder-to-String conversions. It always used StaticLayout instead of DynamicLayout, which removed the overhead from TextView's extra features like embedded drawables and text change watchers.
The team warmed up TextLayoutCache on background threads after the feed downloaded and during scroll pauses. This cut total jitter by 50% while keeping the Instagram feed scrolling smooth.