Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Pemanasan Awal Pencelup dan Pemindahan Impeller

Hapuskan kelewatan pencelup pada larian pertama dengan menyusun pencelup terlebih dahulu dan menggunakan pemapar Impeller.

Pelajaran 4 daripada 413 langkah

Pemanasan Awal Pencelup dan Pemindahan Impeller ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Sebab Gagap Berlaku pada Larian Pertama

Pada kali pertama aplikasi Flutter melukis kesan tertentu, bahagian belakang GPU perlu mengompil program shader yang mendasarinya pada peranti. Dengan bahagian belakang Skia lama, pengompilan ini berlaku secara malas, tepat di tengah-tengah bingkai yang memerlukannya.

Pengompilan shader boleh mengambil masa berpuluh-puluh milisaat.
Hal ini melebihi bajet 16ms bagi bingkai 60fps, lalu menghasilkan tersekat-sekat yang kelihatan dan dipanggil gagap shader.
Masalah ini paling teruk pada larian pertama kerana belum ada apa-apa yang dicache.

Animasi, peralihan halaman dan kabur BackdropFilter ialah punca yang lazim.

Ke Mana Perginya Masa

Bingkai yang gagap akibat pengompilan shader kelihatan dengan jelas dalam paparan Prestasi DevTools sebagai bar tinggi pada benang raster dengan peristiwa ShaderCompilation.

Untuk menghasilkan semula dan mengukurnya dengan boleh dipercayai, jalankan dalam mod profil (jangan sekali-kali gunakan mod nyahpepijat, yang jauh lebih perlahan dan mengelirukan):

Mod profil memberikan prestasi seperti keluaran dengan cangkuk surihan.
Garis masa DevTools menandakan peristiwa pengompilan shader supaya anda boleh mengesahkan punca sebenar sebelum mengoptimumkan.

// Run the app in profile mode to capture realistic frame timings.
// flutter run --profile

// Then open DevTools > Performance and look for
// 'ShaderCompilation' events on the raster thread.
// flutter run --profile --trace-skia

Strategi Pemanasan Skia

Pada bahagian belakang Skia lama, pembaikan klasik ialah pemanasan shader: kumpulkan shader yang digunakan oleh aplikasi anda ke dalam satu himpunan, kemudian prakompilkannya semasa permulaan sebelum pengguna berinteraksi.

Flutter menjana himpunan ini untuk anda dengan bendera --cache-sksl, yang merekodkan program SkSL (Bahasa Shader Skia) semasa anda menggunakan aplikasi:

// 1. Run in profile mode, capturing SkSL while you navigate every screen
//    and trigger every animation that might cause jank.
// flutter run --profile --cache-sksl --purge-persistent-cache

// 2. In the running app, press 'M' in the terminal to write the
//    captured shaders to a JSON file, e.g. flutter_01.sksl.json

Menghimpunkan Shader yang Dirakam

Setelah anda mempunyai fail .sksl.json yang telah ditangkap, himpunkannya ke dalam binaan keluaran. Flutter melakukan prapenyusunan shader tersebut semasa fasa pemanasan enjin, supaya shader itu tersedia sebelum bingkai pertama yang dilihat pengguna.

Lakukan tangkapan pada peranti fizikal yang serupa dengan perkakasan sasaran anda.
Lakukan tangkapan semula setiap kali UI berubah dengan ketara.

// Bundle the captured SkSL into a release build:
// flutter build apk --bundle-sksl-path flutter_01.sksl.json
// flutter build ios --bundle-sksl-path flutter_01.sksl.json

// The engine warms up these shaders at launch,
// eliminating compile stalls during animations.

Mengapa Pemanasan Skia Hanyalah Penyelesaian Sementara

Pemanasan SkSL berfungsi, tetapi mempunyai beberapa kelemahan sebenar yang mendorong kepada pembaikan yang lebih menyeluruh:

Tangkapan itu khusus kepada peranti dan pemacu; himpunan daripada satu GPU mungkin tidak meliputi GPU yang lain.
Anda perlu ingat untuk melakukan tangkapan semula selepas perubahan UI, jika tidak gangguan bingkai akan kembali tanpa disedari.
Ia hanya meliputi shader yang kebetulan anda gunakan semasa tangkapan.

Jawapan kekal daripada pasukan Flutter ialah enjin pemaparan baharu yang langsung tidak menyusun shader semasa masa jalan: Impeller.

Cara Impeller Menghapuskan Masalah Ini

Impeller melakukan prapenyusunan set shader yang kecil dan tetap semasa pembinaan enjin, bukannya semasa masa jalan. Daripada menjana shader sewenang-wenangnya bagi setiap panggilan lukisan, ia menggabungkan kesan daripada atur cara yang telah diketahui terlebih dahulu ini.

Tanpa penyusunan shader semasa masa jalan, tiada gangguan shader pada penggunaan pertama secara reka bentuk.
Ia menggunakan Metal pada iOS dan Vulkan pada Android moden.
Oleh sebab shader telah diketahui terlebih dahulu, pemanasan --cache-sksl tidak diperlukan dan tidak disokong dengan Impeller.

Status Lalai Impeller

Impeller kini merupakan pemaparan lalai pada iOS dan Android moden (peranti yang menyokong Vulkan), bermula daripada keluaran Flutter stabil terkini. Pada perkakasan Android lama yang tidak mempunyai Vulkan, enjin akan kembali kepada bahagian belakang OpenGL secara automatik.

Kebanyakan aplikasi mendapat manfaat ini tanpa perubahan kod. Kerja pemindahan adalah untuk mengesahkan ketepatan visual dan mengendalikan beberapa kes pinggir apabila Impeller dan Skia memberikan hasil yang berbeza.

Menogol Impeller Mengikut Platform

Anda mengawal Impeller melalui manifes platform natif, bukannya kod Dart. Dengan cara ini, anda boleh memilih untuk mengaktifkan, menyahaktifkan atau membandingkannya dengan Skia semasa ujian pemindahan.

Pada iOS, tetapkan bendera dalam Info.plist; pada Android, dalam AndroidManifest.xml:

<!-- ios/Runner/Info.plist -->
<key>FLTEnableImpeller</key>
<true/>

<!-- android/app/src/main/AndroidManifest.xml (inside <application>) -->
<meta-data
    android:name="io.flutter.embedding.android.EnableImpeller"
    android:value="true" />

Shader Tersuai Masih Memerlukan Pemanasan

Jika anda menghantar shader fragmen GLSL sendiri melalui FragmentProgram, shader tersebut ialah kod anda dan bukan sebahagian daripada set terbina dalam Impeller. Menyusun atau memuatkannya apabila diperlukan masih boleh menghentikan kemajuan satu bingkai.

Penyelesaiannya ialah memuatkan dan memanaskannya semasa permulaan aplikasi, sebelum ia digunakan buat kali pertama dalam animasi:

import 'package:flutter/material.dart';

class ShaderCache {
  static FragmentProgram? ripple;

  // Call during startup so the program is ready before first paint.
  static Future<void> warmUp() async {
    ripple = await FragmentProgram.fromAsset('shaders/ripple.frag');
  }
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ShaderCache.warmUp();
  runApp(const MyApp());
}

Prapemaparan Kesan Mahal

Walaupun shader telah dipra-susun, binaan pertama widget yang mahal masih boleh mengambil masa lebih lama berbanding binaan seterusnya. Teknik yang biasa digunakan ialah memaparkan kesan berat itu di luar skrin semasa skrin percikan atau bingkai pemanasan, supaya kerja tersebut selesai sebelum pengguna menavigasi kepadanya.

Anda boleh memulakan pemaparan pemanasan satu bingkai selepas bingkai pertama dilakukan:

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void scheduleWarmUp(VoidCallback warmUpExpensiveEffects) {
  // Runs once after the first frame is rendered,
  // so warm-up work does not block startup paint.
  SchedulerBinding.instance.addPostFrameCallback((_) {
    warmUpExpensiveEffects();
  });
}

Mengukur Keberkesanan

Sentiasa sahkan peningkatan dengan data, bukan sekadar perasaan. Bandingkan masa raster bingkai paling teruk sebelum dan selepas perubahan, pada peranti sebenar dalam mod profil.

Anda boleh mengira statistik mudah daripada pemasaan bingkai yang ditangkap untuk mengesahkan bahawa bingkai persentil ke-99 kini menepati bajet:

void main() {
  // Raster times in milliseconds captured before the warm-up fix.
  final frames = <double>[8.1, 7.9, 42.6, 8.0, 9.3, 8.2, 7.7];

  frames.sort();
  final worst = frames.last;
  final p50 = frames[frames.length ~/ 2];
  const budget = 16.0; // 60fps frame budget

  print('p50: ${p50}ms  worst: ${worst}ms');
  print(worst > budget
      ? 'Jank present: worst frame exceeds ${budget}ms'
      : 'All frames within budget');
}

Semakan Pantas

Anda memindahkan aplikasi tahap C1 daripada Skia kepada Impeller untuk membaiki gangguan shader pada penggunaan pertama. Apakah yang berlaku kepada himpunan pemanasan SkSL sedia ada anda dan mengapa?

Jawab dalam pelajaran interaktif

Ringkasan

Kini anda tahu cara menghapuskan gangguan shader pada penggunaan pertama dalam Flutter:

Diagnosis gangguan penyusunan shader dalam paparan Performance DevTools menggunakan mod profil.
Pemanasan Skia dengan --cache-sksl dan --bundle-sksl-path melakukan prapenyusunan SkSL yang ditangkap, tetapi kaedah ini khusus kepada peranti dan rapuh.
Impeller ialah penyelesaian kekal: ia melakukan prapenyusunan set shader tetap semasa pembinaan, jadi tiada penyusunan semasa masa jalan dan tiada gangguan shader secara reka bentuk. Ia menjadi lalai pada iOS dan Android moden (Vulkan).
Togol Impeller melalui Info.plist dan AndroidManifest.xml; buang himpunan SkSL anda selepas pemindahan.
Shader FragmentProgram tersuai masih memerlukan pemanasan permulaan yang jelas.
Sentiasa ukur masa raster bingkai paling teruk pada peranti sebenar untuk mengesahkan keberkesanan.

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemanasan Awal Pencelup dan Pemindahan Impeller” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Pemanasan Awal Pencelup dan Pemindahan Impeller”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemanasan Awal Pencelup dan Pemindahan Impeller”?

Hapuskan kelewatan pencelup pada larian pertama dengan menyusun pencelup terlebih dahulu dan menggunakan pemapar Impeller. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pemanasan Awal Pencelup dan Pemindahan Impeller” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Tiga Pepohon: Widget, Elemen dan RenderObject
Menganalisis Kelewatan dengan Garis Masa DevTools
RepaintBoundary, Widget Const dan Pemangkasan Bina Semula
Pemanasan Awal Pencelup dan Pemindahan Impeller

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter