Supercharging Discord Mobile: Our Journey to a Faster App

Discord · 2025 · 4. Điều chỉnh · Độ khó: Trung bình — bài gốc

Bối cảnh

• Desktop dùng React, mobile dùng React Native. Android ban đầu không dùng React Native vì lo hiệu năng; máy Android mạnh lên và engine Hermes làm Discord chuyển Android sang React Native năm 2022, đổi lại khởi động chậm trên máy yếu (trung vị thời gian khởi động giảm một nửa trong 2023, bài khác).
• Đợt này nhắm vào thứ được dùng nhiều nhất và vào power user: tối đa 100 server (Nitro 200), server có 50–250 emoji tuỳ chỉnh, một màn hình hiện khoảng 150 emoji có thể đều là ảnh động.

Thay đổi chính

• Danh sách server ảo hoá: bản cũ giữ mọi view và icon (cả icon động) trong bộ nhớ dù không hiển thị. Bản mới chỉ giữ phần đang thấy: người có hơn 100 server giảm 14% bộ nhớ lúc khởi động, khởi động nhanh hơn 10%.
• Chat list (vốn đã native): tái sử dụng (recycle) component và mosaic ảnh, nạp lười phần ít dùng (spoiler, overlay upload), đo kích thước nhanh hơn, đổ sẵn pool recycle trước khi người dùng mở chat: tới 60% ít frame chậm hơn, khoảng 12% ít bộ nhớ hơn.
• Emoji picker Android viết lại native: bản React Native hiện khung trắng khi cuộn nhanh trên máy yếu, có khi hết bộ nhớ. Theo Discord, tối ưu từng phần không đủ nên chấp nhận Android native, iOS vẫn React Native; sẽ xem lại khi lên New Architecture của React Native.
• Media proxy hỗ trợ WebP động (2024): đổi emoji động từ GIF sang WebP, máy yếu hiện được 60 fps.
• Danh sách: năm 2023 chuyển ChannelList sang FlashList của Shopify (không cần biết trước kích thước phần tử), nhưng nó hay trắng khung trên Android yếu nên quay lại FastList tự viết. Viết thêm FastestList dùng RecyclerView native và "view portaling": phía native dời view JS đã render khi vào viewport, nên biết lúc không còn view để vẽ placeholder thay vì trắng khung chờ JS. Dùng cho GIF/sticker picker, danh sách DM, danh sách thành viên.
• iOS media picker: dùng chế độ giao ảnh "opportunistic" (thumbnail chất lượng thấp trước) và đổi kích thước preview 370×370 → 256×256, cỡ trúng cache của PhotoKit: bỏ được 4,5 giây sinh preview.

Vì sao

• Theo Discord, React Native giúp ra tính năng nhanh trên nhiều nền tảng nhưng ít biên an toàn về hiệu năng; người dùng nặng nhất là nơi lộ vấn đề trước.
• Kế tiếp (2025): New Architecture của React Native, static Hermes, chuyển store và logic giao tiếp lõi sang Rust, thêm metric từ mỗi lượt test CI để bắt hồi quy.

Bài học cho SWE

• Tối ưu theo người dùng ở đuôi phân phối (nhiều server, nhiều emoji, máy rẻ) chứ không theo trung bình.
• Thư viện ngoài tiện lúc làm mới có thể kém ở thiết bị yếu nhất; được phép quay lại cái tự viết, và cũng được phép chấp nhận hai codebase cho một màn hình khi số liệu đáng.
• Chỉ cần đổi một tham số (kích thước ảnh preview) để trúng cache của hệ bên dưới có khi lợi hơn mọi tối ưu khác.

Liên quan

• Kiến trúc frontend
• Zerodha 2022 (cùng bài toán React Native trên Android yếu) · Shopify 2026 (React Native → native) · Discord 2020