งานคำนวณหนักโดยไม่ทำให้หน้าจอกระตุก

Jank คืออาการกระตุกที่มองเห็นได้เมื่อส่วนติดต่อผู้ใช้แสดงเฟรมไม่ทัน มักเกิดเมื่อการประมวลผลหนักใช้ไอโซเลตหลักนานเกินไป 😬

ที่ 60fps คุณมีเวลาประมาณ 16 มิลลิวินาทีต่อเฟรม หากใช้เวลานี้จนเกินงบในไอโซเลตหลัก หน้าจอจะค้างชั่วครู่

สังเกตงานที่ใช้ CPU หนัก เช่น การแยกวิเคราะห์ JSON ขนาดใหญ่ การใช้ตัวกรองรูปภาพ การเข้ารหัส หรือการเรียงลำดับข้อมูลจำนวนมาก งานเหล่านี้เป็นสาเหตุคลาสสิกของอาการกระตุก

ย้ายงานหนักนั้นไปยัง ไอโซเลตอื่น ไอโซเลตหลักจะวาดเฟรมต่อไป ขณะที่ worker ประมวลผลแบบขนาน

ใน Flutter ตัวช่วย compute จะห่อหุ้มไอโซเลตให้คุณ เพียงส่งฟังก์ชันและอาร์กิวเมนต์ให้ แล้วรอผลลัพธ์

compute รับฟังก์ชันหนึ่งฟังก์ชันและอาร์กิวเมนต์หนึ่งค่า ส่วน Isolate.run รับ closure ทั้งสองวิธีจะทำงานเดียวในเธรดเบื้องหลังและส่งคืน Future

การคัดลอกข้อมูลระหว่างไอโซเลตต้องใช้เวลา ส่งเฉพาะสิ่งที่งาน ต้องใช้ และส่งกลับเฉพาะผลลัพธ์ที่ตัดให้เหลือเท่าที่จำเป็น

การข้ามขอบเขตของไอโซเลตไม่ได้ฟรี ควรส่งข้อมูลแบบ รวมเป็นชุดครั้งเดียว แทนการส่งข้อความเล็ก ๆ จำนวนมากไปมา

หากงานเดิมทำงานบ่อย ๆ ไอโซเลตที่สร้างไว้และทำงานระยะยาวจะดีกว่าการสร้างใหม่ทุกครั้ง ให้ นำกลับมาใช้เพื่อข้ามค่าใช้จ่ายในการเริ่มต้น

อย่าเดา ให้ทำโปรไฟล์ด้วย DevTools เพื่อค้นหาว่างานใดทำให้เฟรมตกจริง ๆ ก่อนย้ายงานนั้นไปยังไอโซเลต

การรอเครือข่ายหรือดิสก์ไม่ใช่งานของ CPU ดังนั้นการใช้ async ธรรมดาก็ช่วยให้การทำงานราบรื่นอยู่แล้ว เก็บไอโซเลตไว้สำหรับการคำนวณจริง ๆ

เพื่อเอาชนะอาการ jank ให้ทำโปรไฟล์ก่อน แล้วจึงย้ายงานที่ใช้ CPU หนักไปยังไอโซเลตผ่าน compute หรือ Isolate.run ส่งข้อมูลให้น้อยและทำให้ส่วนติดต่อผู้ใช้ลื่นไหล ✅