بهینه‌سازی عملکرد اپ فلاتر: ۹ تکنیک برای ۶۰ فریم روان

فلاتر ذاتاً سریع است، ولی کد بد می‌تواند همین سرعت را از بین ببرد. هدف، ۶۰ فریم بر ثانیه است (یعنی هر فریم حداکثر حدود ۱۶ میلی‌ثانیه). این نه تکنیک عملی به شما کمک می‌کنند.

#۱. اول اندازه بگیرید، بعد بهینه کنید

عملکرد را همیشه در حالت profile روی یک گوشی واقعی (ترجیحاً ضعیف) بسنجید، نه در debug و شبیه‌ساز:

flutter run --profile

سپس Flutter DevTools را باز کنید و بخش Performance را ببینید. فریم‌های قرمز یعنی مشکل.

#۲. از const استفاده کنید

ویجتی که const است، هر بار دوباره ساخته نمی‌شود:

const Padding(
  padding: EdgeInsets.all(16),
  child: Text('عنوان'),
)

قاعده‌ی ساده: هر جا می‌توانید const بگذارید (لینتر prefer_const_constructors یادآوری می‌کند).

#۳. rebuild را کوچک نگه دارید

اگر state در بالای درخت عوض شود، کل زیردرخت دوباره ساخته می‌شود. ویجت‌های بزرگ را به ویجت‌های کوچک‌تر بشکنید و state را نزدیک جایی که لازم است نگه دارید. به جای یک متد build ۳۰۰ خطی، چند کلاس ویجت داشته باشید.

#۴. لیست‌های بزرگ را lazy بسازید

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, i) => ItemTile(items[i]),
)

ListView(children: [...]) همه‌ی آیتم‌ها را یک‌جا می‌سازد، ولی builder فقط موارد قابل‌مشاهده را. اگر آیتم‌ها ارتفاع ثابت دارند، itemExtent را هم بدهید.

#۵. تصاویر را درست بارگذاری کنید

تصویر بزرگ را در اندازه‌ی کوچک نمایش‌دادن حافظه‌ی زیادی می‌خورد:

Image.network(url, cacheWidth: 400)

برای تصاویر شبکه از یک کش مثل cached_network_image استفاده کنید.

#۶. از Opacity و ClipRRect روی درخت بزرگ دوری کنید

این‌ها لایه‌ی جدا (saveLayer) می‌سازند که گران است. جایگزین‌ها: FadeTransition، AnimatedOpacity، و برای گوشه‌گرد کردن، decoration با borderRadius به‌جای ClipRRect روی محتوای سنگین.

#۷. کار سنگین را از isolate اصلی بیرون ببرید

پردازش JSON حجیم، فشرده‌سازی یا تبدیل تصویر نباید رابط را قفل کند:

final result = await Isolate.run(() => parseHugeJson(text));

#۸. از RepaintBoundary درست استفاده کنید

بخشی که مدام انیمیت می‌شود را در RepaintBoundary بگذارید تا بقیه‌ی صفحه در هر فریم دوباره رنگ نشود. ولی بی‌حساب استفاده نکنید؛ هر مرز هزینه‌ی خودش را دارد.

#۹. تا جای ممکن shrinkWrap و ListView تو در تو را حذف کنید

shrinkWrap: true روی لیست بزرگ، همه‌ی آیتم‌ها را اندازه‌گیری می‌کند و کند است. به‌جای آن از CustomScrollView با SliverList استفاده کنید.

#چک‌لیست قبل از انتشار

• حالت profile روی دستگاه ضعیف بدون فریم قرمز.
• لیست‌ها همه lazy هستند.
• تصاویر با اندازه‌ی مناسب بارگذاری می‌شوند.
• کارهای سنگین در Isolate اجرا می‌شوند.

یادتان باشد: بهینه‌سازی زودهنگام بدون اندازه‌گیری فقط کد را پیچیده می‌کند. اول DevTools، بعد تصمیم.