Pembangunan Aplikasi Desktop Electron · Pelajaran

Teknik Pengurusan Memori

Kenal pasti dan selesaikan kebocoran memori serta gunakan amalan terbaik untuk penggunaan memori yang cekap dalam aplikasi Electron anda.

Pelajaran 2 daripada 411 langkah

Teknik Pengurusan Memori ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Mengapa Memori Penting dalam Electron

Pengurusan memori amat penting untuk membina aplikasi Electron yang berprestasi tinggi dan stabil. Aplikasi yang diurus dengan baik menggunakan lebih sedikit sumber, terasa lebih pantas dan mengelakkan ranap, lalu menghasilkan pengalaman pengguna yang jauh lebih baik.

Pengendalian memori yang lemah boleh menyebabkan:

Respons aplikasi perlahan
Penggunaan CPU meningkat
Aplikasi terhenti atau ranap
Sistem menjadi perlahan secara keseluruhan

Landskap Memori Dwi Electron

Aplikasi Electron mempunyai dua jenis proses utama, setiap satunya dengan jejak memori tersendiri:

Proses Utama: Persekitaran Node.js yang mengurus tetingkap dan interaksi OS asli.
Proses Pemapar: Tika pelayar Chromium yang memaparkan kandungan web anda (HTML, CSS, JavaScript). Setiap tetingkap atau paparan web biasanya berjalan dalam proses pemapar tersendiri.

Memahami sifat dwi ini membantu mengenal pasti lokasi masalah memori yang mungkin berlaku.

Apakah Kebocoran Memori?

Kebocoran memori berlaku apabila aplikasi anda menggunakan memori tetapi gagal melepaskannya apabila memori itu tidak lagi diperlukan. Lama-kelamaan, memori yang tidak digunakan ini terkumpul dan menyebabkan masalah yang dibincangkan sebelum ini.

Dalam JavaScript, kebocoran memori sering berlaku apabila objek yang sepatutnya dikutip oleh pengutip sampah (dibebaskan) masih dirujuk, lalu menghalang pengutip sampah daripada mendapatkan semula memorinya.

Kebocoran Lazim: Pendengar Peristiwa yang Tidak Dibersihkan

Salah satu punca kebocoran memori yang paling lazim ialah kegagalan membuang pendengar peristiwa. Apabila anda melampirkan pendengar pada objek, objek itu menyimpan rujukan kepada fungsi pendengar anda dan mungkin juga skop tempat fungsi itu ditakrifkan.

Jika objek yang mencetuskan peristiwa hidup lebih lama daripada objek yang mendaftarkan pendengar, pendengar tersebut (serta objek yang dirujuk olehnya) tidak akan dikutip oleh pengutip sampah. Cuba jalankan contoh ini untuk melihat bagaimana objek boleh kekal wujud disebabkan pendengar yang tidak dibuang.

const EventEmitter = require('events');

const eventBus = new EventEmitter();

class MyComponent {
  constructor(id) {
    this.id = id;
    this.data = new Array(100000).fill(`data-for-${id}`); // Simulate large data
    this.listener = () => {
      console.log(`Component ${this.id} received event.`);
    };
    eventBus.on('event', this.listener); // Attaching listener
    console.log(`Component ${this.id} created.`);
  }
  // No 'dispose' method to remove the listener!
}

let activeComponents = [];

function createAndForgetComponent(id) {
  const component = new MyComponent(id);
  activeComponents.push(component); // Keeps a direct reference too
  return component;
}

console.log("--- Simulating components without proper cleanup ---");
createAndForgetComponent(1);
createAndForgetComponent(2);

eventBus.emit('event'); // Trigger event

// Even if activeComponents were cleared, the listeners on eventBus
// would still hold references to MyComponent instances, preventing GC.
console.log("Components created. Their listeners persist on the eventBus.");

Membaiki Kebocoran Pendengar Peristiwa

Penyelesaiannya mudah: sentiasa buang pendengar peristiwa apabila objek atau component yang mendaftarkannya tidak lagi diperlukan. Hal ini biasanya berlaku apabila tetingkap ditutup, paparan dinyahlekap atau objek dimusnahkan.

Gunakan `removeListener()` (atau `off()` untuk `EventEmitter`) untuk menanggalkan pendengar secara jelas. Ini memutuskan rantaian rujukan dan membolehkan pengutipan sampah berlaku.

const EventEmitter = require('events');

const eventBus = new EventEmitter();

class MyComponent {
  constructor(id) {
    this.id = id;
    this.data = new Array(100000).fill(`data-for-${id}`);
    this.listener = () => {
      console.log(`Component ${this.id} received event.`);
    };
    eventBus.on('event', this.listener);
    console.log(`Component ${this.id} created.`);
  }

  dispose() {
    eventBus.removeListener('event', this.listener); // Crucial cleanup!
    console.log(`Component ${this.id} listener removed.`);
  }
}

console.log("--- Creating and disposing components properly ---");
const comp1 = new MyComponent(1);
const comp2 = new MyComponent(2);

eventBus.emit('event'); // Both components receive event

comp1.dispose(); // Clean up component 1
comp2.dispose(); // Clean up component 2

eventBus.emit('event'); // No output from disposed components

console.log("Components disposed. Their memory can now be reclaimed by GC.");

Mengesan Kebocoran dengan DevTools

Untuk proses pemapar aplikasi Electron anda (yang memaparkan UI anda), DevTools terbina dalam Chromium amat berguna. Tab 'Memory' ialah alat utama anda untuk pemprofilan.

Buka DevTools (Cmd+Option+I / Ctrl+Shift+I).
Pergi ke tab 'Memory'.
Ambil petikan timbunan pada masa yang berbeza (contohnya, sebelum dan selepas sesuatu tindakan).
Bandingkan petikan untuk mengenal pasti objek yang bertambah dari segi bilangan atau saiz tanpa dilepaskan.

Cari nod DOM yang tertanggal atau pengekalan objek yang tidak dijangka.

Pemantauan Memori Proses Utama

Proses utama berjalan dalam persekitaran Node.js. Anda boleh menyoal penggunaan memorinya secara langsung menggunakan kaedah process.memoryUsage() terbina dalam Node.js. Ini memberikan gambaran tentang segmen memori yang berbeza:

RSS (Saiz Set Residen): Jumlah memori yang diperuntukkan untuk proses tersebut.
Jumlah Timbunan: Jumlah saiz timbunan V8.
Timbunan Digunakan: Memori sebenar yang digunakan oleh objek dalam timbunan V8.
Luaran: Memori yang digunakan oleh objek C++ yang terikat pada objek JavaScript.

function logMemoryUsage() {
  const mu = process.memoryUsage();
  console.log('Current Memory Usage:');
  console.log(`  RSS: ${Math.round(mu.rss / 1024 / 1024 * 100) / 100} MB`);
  console.log(`  Heap Total: ${Math.round(mu.heapTotal / 1024 / 1024 * 100) / 100} MB`);
  console.log(`  Heap Used: ${Math.round(mu.heapUsed / 1024 / 1024 * 100) / 100} MB`);
  console.log(`  External: ${Math.round(mu.external / 1024 / 1024 * 100) / 100} MB`);
}

console.log("--- Initial memory usage ---");
logMemoryUsage();

// Simulate allocating a large array
let largeArray = new Array(500 * 1000).fill('some-data-string-to-fill-memory');

console.log("\n--- After allocating a large array ---");
logMemoryUsage();

// Release the reference to the large array
largeArray = null;

// Note: GC is non-deterministic. Memory might not drop immediately.
setTimeout(() => {
  console.log("\n--- After nulling array (GC might have run) ---");
  logMemoryUsage();
}, 100); // Give GC a moment

Nyahrujuk Objek yang Tidak Digunakan

Apabila objek tidak lagi diperlukan, menyahrujuknya secara jelas dengan menetapkan rujukannya kepada null kadangkala boleh membantu pengutip sampah. Walaupun GC JavaScript adalah pintar, mengosongkan rujukan boleh membantu mendapatkan semula memori tepat pada masanya, terutamanya untuk objek besar atau struktur kompleks.

Ini amat berguna untuk pemboleh ubah global atau objek yang disimpan dalam skop yang berjangka hayat panjang.

let cachedImageData = {
  id: 'img-001',
  data: new Array(1000000).fill(0).map((_, i) => `pixel-data-${i}`) // Huge data
};

function useImageData(data) {
  console.log(`Using cached image: ${data.id}`);
  // ... complex image processing ...
}

console.log("Before processing (cachedImageData exists):", cachedImageData.id);
useImageData(cachedImageData);

// When 'cachedImageData' is no longer needed:
cachedImageData = null; // Explicitly dereference it

console.log("After processing (cachedImageData dereferenced). If no other references exist, its memory can be reclaimed.");

Kendalikan Data Besar dengan Cekap

Memuatkan semua data ke dalam memori sekaligus ialah punca lazim penggunaan memori yang berlebihan. Gunakan strategi untuk mengendalikan set data besar dengan cekap:

Penstriman: Proses data dalam bahagian kecil (contohnya, I/O fail) dan bukannya memuatkan keseluruhan fail.
Pemuatan Malas: Muatkan sumber (imej, data) hanya apabila benar-benar diperlukan atau mula kelihatan kepada pengguna.
Pemayaan: Untuk senarai atau jadual yang panjang, paparkan hanya item yang sedang kelihatan dalam ruang pandang, dengan memuatkan dan menyahmuat kandungan secara dinamik semasa pengguna menatal.
Penyahlantunan/Pendikitan: Hadkan panggilan fungsi untuk peristiwa yang kerap berlaku (seperti pengubahan saiz, penatalan dan input) bagi mengelakkan penciptaan objek yang berlebihan.

Uji Pengetahuan Anda

Manakah antara berikut merupakan teknik yang berkesan untuk mencegah atau mengenal pasti kebocoran memori dalam aplikasi Electron?

Jawab dalam pelajaran interaktif

Imbas Kembali: Aplikasi Electron yang Ringkas dan Cekap

Pengurusan memori yang berkesan amat penting untuk membina aplikasi Electron yang berprestasi baik dan stabil. Dengan memahami cara Electron menggunakan memori merentas proses utama dan pemaparnya, anda boleh mencegah masalah secara proaktif.

Perkara utama:

Bersihkan: Sentiasa buang pendengar peristiwa dan nyahrujuk objek yang tidak digunakan.
Pantau: Gunakan DevTools untuk proses pemapar dan `process.memoryUsage()` untuk proses utama.
Optimumkan: Gunakan teknik pengendalian data yang cekap seperti penstriman dan pemuatan malas.

Pastikan aplikasi Electron anda ringkas dan responsif!

Percuma untuk bermula

Pelajari JavaScript 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: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Teknik Pengurusan Memori” percuma?

Ya — teks penuh “Teknik Pengurusan Memori” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Teknik Pengurusan Memori”?

Kenal pasti dan selesaikan kebocoran memori serta gunakan amalan terbaik untuk penggunaan memori yang cekap dalam aplikasi Electron anda. Anda berlatih Pembangunan Aplikasi Desktop Electron 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 Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron 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 2 daripada 4.

Berapa lamakah pelajaran “Teknik Pengurusan Memori” 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 Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron 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

← Kembali ke Pembangunan Aplikasi Desktop Electron