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
Critical Insight
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.
