Bạn tối ưu hiệu năng ứng dụng Flutter như thế nào?

Question

Accepted Answer

Mặc dù Flutter có hiệu năng tốt mặc định, tối ưu hiệu năng liên quan đến giảm thiểu các **rebuild** không cần thiết, **render danh sách** hiệu quả, sử dụng **const** đúng cách, tránh công việc tốn kém trong build, và profiling. Hiểu những điều này giữ ứng dụng mượt mà (60/120 fps).

## Giảm thiểu rebuild không cần thiết

```text
✓ Dùng constructor CONST nơi có thể → widget const không bị rebuild (lợi ích lớn)
  const Text('Static')   // không bị rebuild không cần thiết
✓ Giữ phạm vi setState/rebuild NHỎ → chỉ rebuild thứ đã thay đổi (tách widget để
  thay đổi state rebuild một subtree nhỏ, không phải cả màn hình)
✓ Dùng state management có mục tiêu (chỉ rebuild các widget phụ thuộc vào state đã thay đổi)
✓ Đừng rebuild cây lớn cho thay đổi nhỏ
```

## Danh sách hiệu quả

```text
✓ Dùng ListView.BUILDER (không phải ListView với tất cả child) cho danh sách dài/vô hạn →
  chỉ build các item HIỂN THỊ một cách lười (không phải tất cả cùng lúc) — then chốt cho danh sách dài
✓ Tương tự cho GridView.builder; dùng key phù hợp; tránh widget item nặng
```

## Tránh công việc tốn kém trong build()

```text
✓ build() chạy THƯỜNG XUYÊN → giữ nó nhẹ; đừng tính toán nặng, I/O, hoặc cấp phát ở đó
✓ Cache/tính trước các kết quả tốn kém; chuyển công việc ra khỏi build
✓ Tính toán nặng → dùng ISOLATE (chạy trên một luồng riêng, ngoài luồng UI) để
  tránh jank (luồng UI phải rảnh để render mượt 60fps)
```

## Profiling và các tối ưu khác

```text
✓ Dùng Flutter DEVTOOLS → performance overlay, widget rebuild profiler, timeline →
  TÌM các nút thắt thực sự (đo đạc, đừng đoán)
✓ Tối ưu ảnh (kích thước, caching); tránh opacity/clipping không cần thiết (tốn kém)
✓ Test ở chế độ PROFILE/RELEASE (chế độ debug chậm hơn — đừng đánh giá perf ở debug)
✓ Giảm overdraw; dùng RepaintBoundary để cô lập repaint
```

## Tại sao điều này quan trọng

Hiểu tối ưu hiệu năng Flutter là kiến thức cấp senior có giá trị vì **hiệu năng mượt mà là thiết yếu cho trải nghiệm người dùng tốt**, và mặc dù Flutter có hiệu năng tốt mặc định, ứng dụng thực tế có thể phát sinh các vấn đề hiệu năng (jank, dropped frame) cần xử lý.

Đòn bẩy lớn nhất là **giảm thiểu rebuild không cần thiết**: dùng **constructor const** (để widget const không bị rebuild — một lợi ích lớn, dễ), giữ **phạm vi setState/rebuild nhỏ** (tách widget để thay đổi state chỉ rebuild một subtree nhỏ thay vì cả màn hình), và dùng state management có mục tiêu (chỉ rebuild các widget phụ thuộc vào state đã thay đổi) — vì rebuild không cần thiết là một vấn đề hiệu năng phổ biến. **Render danh sách hiệu quả** là then chốt: dùng **`ListView.builder`** (vốn build một cách lười chỉ các item hiển thị) thay vì build tất cả child cùng lúc là thiết yếu cho danh sách dài — một tối ưu phổ biến, quan trọng. **Tránh công việc tốn kém trong `build()`** quan trọng vì build chạy thường xuyên (nên nó phải nhẹ, với tính toán nặng được chuyển ra hoặc chạy trên **isolate** ngoài luồng UI để tránh jank, vì luồng UI phải rảnh để render mượt). **Profiling với Flutter DevTools** (performance overlay, rebuild profiler, và timeline để tìm các nút thắt thực sự) là kỷ luật then chốt — đo đạc thay vì đoán — cùng với việc test ở chế độ profile/release (không phải debug, vốn chậm hơn) và tối ưu ảnh và repaint.

Hiệu năng mượt 60/120fps là điều khiến ứng dụng cảm thấy tinh tế, và jank thì dễ nhận thấy và gây khó chịu, nên các tối ưu này ảnh hưởng trực tiếp đến trải nghiệm người dùng.

Vì hiệu năng mượt mà là thiết yếu cho UX tốt và ứng dụng Flutter thực tế có thể phát sinh các vấn đề hiệu năng mà tối ưu đúng cách (const, rebuild tối thiểu, danh sách hiệu quả, build nhẹ, isolate, profiling) giải quyết, hiểu tối ưu hiệu năng Flutter là kiến thức cấp senior có giá trị để xây dựng ứng dụng mượt mà, tinh tế — một kỹ năng then chốt cho phát triển Flutter chuyên nghiệp đảm bảo ứng dụng vẫn phản hồi tốt và không jank, phản ánh nhận thức về hiệu năng được kỳ vọng cho các vai trò senior.