Vue: Kemungkinan kebocoran memori saat v-for dalam mode pengembangan

Dibuat pada 17 Jul 2018 · 3Komentar · Sumber: vuejs/vue

Versi: kapan

2.5.16

Tautan reproduksi

https://codepen.io/anon/pen/KBMaOY

Langkah-langkah untuk mereproduksi

Buka codepen https://codepen.io/anon/pen/gjMgzG
Klik beberapa kali untuk mencantumkan 0 item, lalu 1000
Lihat memori meningkat
Coba paksa GC (ikon sampah) sebelum mengukurnya
Ambil cuplikan heap di tab "Memori" Chrome
Perhatikan penggunaan memori di task manager Chome (shift esc)
Perhatikan penggunaan memori di pengelola tugas OS

Apa yang diharapkan?

Penggunaan memori yang sama setelah pengumpul sampah

Apa yang sebenarnya terjadi?

Meskipun tab "Kinerja" menampilkan penggunaan memori yang sama, cuplikan heap "Memori" menampilkan peningkatan memori.
Selain itu, pengelola tugas Chrome dan OS hanya menunjukkan peningkatan memori.

Ini menjadi lebih buruk ketika:

Menggunakan Vuei18n (bahkan tanpa menerjemahkan)
Memiliki komponen anak besar

Diuji pada:

Windows 7 64 Bit
Chrome 67.0.3396.99 64 bit

Tolong, pertimbangkan bahwa:

Saya mungkin melakukan sesuatu yang salah
Ini bisa menjadi masalah Chrome
Ini bisa menjadi masalah OS

improvement

Sumber

peluprvi

👍2

Komentar yang paling membantu

Saya memiliki masalah yang sama, ada kemajuan tentang ini?

Rikhart pada 23 Okt 2018

👍2

Semua 3 komentar

Sepertinya ada kebocoran di mode non-produksi saja. Anda harus baik-baik saja dalam produksi

posva pada 17 Jul 2018

Terima kasih atas pengembaliannya @posva .

Saya juga membuat masalah pada vue-i18n, karena penggunaan memori menjadi terlalu berat saat menggunakannya.
Saya juga menggunakan vue-virtual-scroller, yang menghancurkan dan membuat banyak komponen saat membuat paginasi atau menggulir halaman.

Saya tidak tahu seberapa besar hubungan ini, tetapi kedua paket ini bersama dengan beberapa struktur komponen yang kompleks atau lebih dalam mengambil banyak penggunaan memori bahkan pada mode produksi.

Melihat ke pengelola tugas Google, tab aplikasi saya meningkat ~2.400K setiap item yang saya gulir ke bawah/atas (masing-masing dihancurkan/dibuat dalam proses).
Dalam waktu kurang dari satu menit menggulir ke atas dan ke bawah saya mendapatkan penggunaan memori hampir 1GB, mode produksi atau alat pengembang ditutup atau setelah GC. Dan itu tidak turun banyak setelah rute.

Saya tidak terbiasa dengan kode inti vue atau vue-i18n, tetapi sepertinya struktur komponen yang diinstal disalin untuk setiap komponen bersarang di aplikasi, dan GC tidak dapat membersihkannya setelah menghancurkan komponen bersarang itu. Ini bisa jadi cara vue-i18n menginstal sendiri, saya benar-benar tidak tahu. Data di bawah ini yang membuat saya berpikir tentang hal itu: