คุณเพิ่มประสิทธิภาพแอป Flutter อย่างไร?

Question

Accepted Answer

แม้ Flutter จะมีประสิทธิภาพดีโดยค่าเริ่มต้น แต่การเพิ่มประสิทธิภาพเกี่ยวข้องกับการลด **rebuilds** ที่ไม่จำเป็น, การ render **list** อย่างมีประสิทธิภาพ, การใช้ **const** อย่างเหมาะสม, การหลีกเลี่ยงงานหนักใน build และการ profiling การเข้าใจสิ่งเหล่านี้ช่วยให้แอปลื่นไหล (60/120 fps)

## ลด rebuilds ที่ไม่จำเป็น

```text
✓ Use CONST constructors where possible → const widgets aren't rebuilt (huge win)
  const Text('Static')   // not rebuilt unnecessarily
✓ Keep setState/rebuild scope SMALL → rebuild only what changed (extract widgets so
  state changes rebuild a small subtree, not the whole screen)
✓ Use targeted state management (rebuild only widgets that depend on changed state)
✓ Don't rebuild large trees for small changes
```

## List ที่มีประสิทธิภาพ

```text
✓ Use ListView.BUILDER (not ListView with all children) for long/infinite lists →
  builds only VISIBLE items lazily (not all at once) — critical for long lists
✓ Same for GridView.builder; use keys appropriately; avoid heavy item widgets
```

## หลีกเลี่ยงงานหนักใน build()

```text
✓ build() runs OFTEN → keep it cheap; don't do heavy computation, I/O, or allocations there
✓ Cache/precompute expensive results; move work out of build
✓ Heavy computation → use ISOLATES (run on a separate thread, off the UI thread) to
  avoid jank (the UI thread must stay free for smooth 60fps rendering)
```

## Profiling และการเพิ่มประสิทธิภาพอื่น ๆ

```text
✓ Use Flutter DEVTOOLS → performance overlay, widget rebuild profiler, timeline →
  FIND the actual bottlenecks (measure, don't guess)
✓ Optimize images (sizes, caching); avoid unnecessary opacity/clipping (expensive)
✓ Test in PROFILE/RELEASE mode (debug mode is slower — don't judge perf in debug)
✓ Reduce overdraw; use RepaintBoundary to isolate repaints
```

## ทำไมจึงสำคัญ

ความเข้าใจในการเพิ่มประสิทธิภาพ Flutter เป็นความรู้ระดับ senior ที่มีคุณค่า เพราะ **ประสิทธิภาพที่ลื่นไหลเป็นสิ่งจำเป็นต่อประสบการณ์ผู้ใช้ที่ดี** และแม้ Flutter จะมีประสิทธิภาพดีโดยค่าเริ่มต้น แต่แอปจริงอาจเกิดปัญหาประสิทธิภาพ (jank, frame ตก) ที่ต้องแก้ไข

คันโยกที่ใหญ่ที่สุดคือการ **ลด rebuilds ที่ไม่จำเป็น**: การใช้ **const constructors** (เพื่อให้ const widgets ไม่ถูก rebuild — เป็นชัยชนะที่สำคัญและง่าย), การให้ขอบเขต **setState/rebuild เล็ก** (การแยก widgets เพื่อให้การเปลี่ยนสถานะ rebuild เพียง subtree เล็ก ๆ แทนที่จะเป็นทั้งหน้าจอ) และการใช้ state management แบบเจาะจง (rebuild เฉพาะ widgets ที่ขึ้นกับสถานะที่เปลี่ยน) — เนื่องจาก rebuilds ที่ไม่จำเป็นเป็นปัญหาประสิทธิภาพที่พบบ่อย การ **render list อย่างมีประสิทธิภาพ** เป็นเรื่องสำคัญยิ่ง: การใช้ **`ListView.builder`** (ซึ่งสร้างเฉพาะ item ที่มองเห็นแบบ lazy) แทนการสร้าง children ทั้งหมดในคราวเดียวเป็นสิ่งจำเป็นสำหรับ list ยาว — เป็นการเพิ่มประสิทธิภาพที่พบบ่อยและสำคัญ การ **หลีกเลี่ยงงานหนักใน `build()`** มีความสำคัญเพราะ build รันบ่อย (จึงต้องเบา โดยย้ายการคำนวณหนักออกไปหรือรันบน **isolates** นอก UI thread เพื่อเลี่ยง jank เพราะ UI thread ต้องว่างเพื่อการ render ที่ลื่นไหล) การ **profiling ด้วย Flutter DevTools** (performance overlay, rebuild profiler และ timeline เพื่อหา bottleneck ที่แท้จริง) เป็นวินัยสำคัญ — การวัดแทนที่จะเดา — พร้อมกับการทดสอบใน profile/release mode (ไม่ใช่ debug ซึ่งช้ากว่า) และการเพิ่มประสิทธิภาพรูปภาพและการ repaint

ประสิทธิภาพ 60/120fps ที่ลื่นไหลคือสิ่งที่ทำให้แอปรู้สึกประณีต และ jank นั้นสังเกตเห็นได้และน่ารำคาญ การเพิ่มประสิทธิภาพเหล่านี้จึงส่งผลโดยตรงต่อประสบการณ์ผู้ใช้

เนื่องจากประสิทธิภาพที่ลื่นไหลเป็นสิ่งจำเป็นต่อ UX ที่ดี และแอป Flutter จริงอาจเกิดปัญหาประสิทธิภาพที่การเพิ่มประสิทธิภาพอย่างเหมาะสม (const, rebuild น้อยที่สุด, list ที่มีประสิทธิภาพ, build ที่เบา, isolates, profiling) สามารถแก้ไขได้ ความเข้าใจในการเพิ่มประสิทธิภาพ Flutter จึงเป็นความรู้ระดับ senior ที่มีคุณค่าสำหรับการสร้างแอปที่ลื่นไหลและประณีต — เป็นทักษะสำคัญสำหรับการพัฒนา Flutter แบบมืออาชีพที่ทำให้แอปตอบสนองได้ดีและปราศจาก jank สะท้อนความตระหนักเรื่องประสิทธิภาพที่คาดหวังในตำแหน่ง senior