Async, Performance & Rendering

คุณมี frame budget

Flutter เล็งไว้ที่ 60fps — และ 120fps บนจอที่รองรับ ที่ 60fps หนึ่ง frame คือ ~16ms ที่ 120fps คือ ~8ms ทุกอย่างที่แอปทำในหนึ่ง frame — build widget, layout, paint — ต้องอยู่ในกรอบเวลานั้น ถ้าเกิน frame จะถูก drop: user เห็น jank

โมดูลนี้ว่าด้วยการปกป้อง budget นั้น มีสองวินัยที่ทำงานเกือบทั้งหมด:

flowchart TB
  budget["Frame budget
16ms ที่ 60fps"] --> a["Async: ป้อนข้อมูล
โดยไม่ block thread"]
  budget --> b["Rebuild และงาน CPU:
กันออกจาก critical path"]
  a --> ok1["FutureBuilder, StreamBuilder"]
  b --> ok2["const, narrow setState,
RepaintBoundary, isolate"]

สองทางที่ทำ frame budget พัง และวิธีเลี่ยงแต่ละทาง

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Futures & Streams in UI	FutureBuilder และ StreamBuilder และกับดัก create-in-build
Rebuilds & performance	const, scope ของ setState, RepaintBoundary และ DevTools
Animations	implicit vs explicit animation และเลือกอันไหนเมื่อไร
Isolates & compute	ย้ายงาน CPU หนักออกจาก UI isolate

เส้นเรื่องหลัก

งาน async ต้องไม่ block UI thread เดี่ยว และ rebuild ต้องไม่ทำมากเกินที่จำเป็น ทำสองอย่างนี้ให้ถูก Flutter จะลื่นเกือบฟรี ทำผิด ต่อให้ widget ฉลาดแค่ไหนก็ช่วยไม่ได้