Merekam snapshot heap

Meggin Kearney

Sofia Emelianova

Pelajari cara merekam snapshot heap dengan Memory > Profiles > Heap snapshot dan menemukan kebocoran memori.

Profiler heap menampilkan distribusi memori berdasarkan objek JavaScript halaman Anda dan node DOM terkait. Gunakan ini untuk mengambil snapshot heap JS, menganalisis grafik memori, membandingkan snapshot, dan menemukan kebocoran memori. Untuk informasi selengkapnya, lihat Hierarki retensi objek.

Jepret

Untuk mengambil snapshot heap:

1. Di halaman yang ingin Anda buat profilnya, buka DevTools dan buka panel Memory.
2. Pilih jenis pembuatan profil Snapshot heap radio_button_checked, lalu pilih instance JavaScript VM, dan klik Ambil snapshot.

Tips: Setelah memilih jenis dan instance, Anda dapat menekan Cmd + E (MacOS) atau Ctrl + E (Windows atau Linux) untuk mengambil snapshot berulang kali.

Saat panel Memory memuat dan mengurai snapshot, panel ini akan menampilkan ukuran total objek JavaScript yang dapat dijangkau di bawah judul snapshot di bagian HEAP SNAPSHOTS.

Snapshot hanya menampilkan objek dari grafik memori yang dapat dijangkau dari objek global. Mengambil snapshot selalu dimulai dengan pengumpulan sampah.

Tujuan: Coba demo objek tersebar ini. Klik Create scattered objects dan ambil snapshot heap. Anda akan melihat sejumlah alokasi (Item).

Hapus snapshot

Untuk menghapus semua snapshot, klik blokir Hapus semua profil:

Lihat snapshot

Untuk memeriksa snapshot dari perspektif yang berbeda untuk tujuan yang berbeda, pilih salah satu tampilan dari menu drop-down di bagian atas:

Lihat	Konten	Tujuan
Ringkasan	Objek yang dikelompokkan berdasarkan nama konstruktor.	Gunakan ini untuk mencari objek dan penggunaan memorinya berdasarkan jenis. Berguna untuk melacak kebocoran DOM.
Perbandingan	Perbedaan antara dua snapshot.	Gunakan ini untuk membandingkan dua (atau lebih) snapshot, sebelum dan setelah operasi. Konfirmasi keberadaan dan penyebab kebocoran memori dengan memeriksa delta di memori yang dibebaskan dan jumlah referensi.
Pembatasan	Konten heap	Memberikan tampilan struktur objek yang lebih baik, dan membantu menganalisis objek yang direferensikan di namespace (jendela) global untuk menemukan penyebab kehadirannya. Gunakan ini untuk menganalisis penutupan dan mengamati objek secara mendalam di tingkat rendah.
Statistik	Diagram lingkaran alokasi memori	Lihat ukuran relatif bagian memori yang dialokasikan untuk kode, string, array JS, array berjenis, dan objek sistem.

Catatan: Tidak semua properti disimpan di heap JavaScript. Properti yang diimplementasikan menggunakan pengambil yang mengeksekusi kode native tidak direkam cuplikannya. Selain itu, nilai non-string seperti angka tidak akan diambil.

Tampilan ringkasan

Awalnya, snapshot heap akan terbuka di tampilan Summary yang mencantumkan Konstruktor di kolom. Anda dapat meluaskan konstruktor untuk melihat objek yang dibuat instance-nya.

Untuk memfilter konstruktor yang tidak relevan, ketik nama yang ingin Anda periksa di Filter class di bagian atas tampilan Ringkasan.

Angka di samping nama konstruktor menunjukkan jumlah total objek yang dibuat dengan konstruktor. Tampilan Ringkasan juga menampilkan kolom berikut:

• Jarak menampilkan jarak ke root menggunakan jalur simpul sederhana yang paling pendek.
• Shallow size menunjukkan jumlah ukuran dangkal semua objek yang dibuat oleh konstruktor tertentu. shallow size adalah ukuran memori yang disimpan oleh objek itu sendiri. Umumnya, array dan string memiliki ukuran dangkal yang lebih besar. Lihat juga Ukuran objek.
• Retained size menampilkan ukuran yang dipertahankan maksimum di antara kumpulan objek yang sama. Ukuran yang dipertahankan adalah ukuran memori yang dapat Anda bebaskan dengan menghapus objek dan membuat dependennya tidak dapat dijangkau lagi. Lihat juga Ukuran objek.

Saat Anda meluaskan konstruktor, tampilan Ringkasan akan menampilkan semua instance-nya. Setiap instance mendapatkan perincian ukuran dangkal dan ukuran yang dipertahankan di kolom yang sesuai. Angka setelah karakter @ adalah ID unik objek. ID ini memungkinkan Anda membandingkan snapshot heap per objek.

Filter konstruktor

Tampilan Ringkasan memungkinkan Anda memfilter konstruktor berdasarkan kasus umum penggunaan memori yang tidak efisien.

Untuk menggunakan filter ini, pilih salah satu opsi berikut dari menu drop-down paling kanan di panel tindakan:

• Semua objek: semua objek yang diambil oleh snapshot saat ini. Tetapkan secara default.
• Objek yang dialokasikan sebelum snapshot 1: objek yang dibuat dan tetap berada di memori sebelum snapshot pertama diambil.
• Objek yang dialokasikan antara Snapshot 1 dan Snapshot 2: melihat perbedaan objek antara snapshot terbaru dan snapshot sebelumnya. Setiap snapshot baru akan menambahkan penambahan filter ini ke daftar drop-down.
• String duplikat: nilai string yang telah disimpan beberapa kali dalam memori.
• Objek yang dipertahankan oleh node terpisah: objek yang tetap aktif karena node DOM terpisah mereferensikannya.
• Objek yang dipertahankan oleh konsol DevTools: objek yang disimpan dalam memori karena dievaluasi atau berinteraksi melalui konsol DevTools.

Entri khusus di Ringkasan

Selain mengelompokkan berdasarkan konstruktor, tampilan Summary juga mengelompokkan objek berdasarkan:

• Fungsi bawaan seperti Array atau Object.
• Elemen HTML yang dikelompokkan menurut tagnya, misalnya, <div>, <a>, <img>, dan lainnya.
• Fungsi yang Anda tetapkan dalam kode.
• Kategori khusus yang tidak didasarkan pada konstruktor.

(array)

Kategori ini mencakup berbagai objek seperti array internal yang tidak secara langsung sesuai dengan objek yang terlihat di JavaScript.

Misalnya, konten objek Array JavaScript disimpan dalam objek internal sekunder bernama (object elements)[], untuk mempermudah pengubahan ukuran. Demikian pula, properti bernama dalam objek JavaScript sering disimpan dalam objek internal sekunder bernama (object properties)[] yang juga tercantum dalam kategori (array).

Eksperimental: Di Chrome 123, aktifkan settings Settings > Experiments > check_box In heap snapshots, treat backing store size as part of the containing object. Opsi ini membuat ukuran dangkal lebih bermakna dengan memperlakukan sebagian besar array internal ini seolah-olah merupakan bagian dari objek penampung.

(compiled code)

Kategori ini mencakup data internal yang diperlukan V8 agar dapat menjalankan fungsi yang ditentukan oleh JavaScript atau WebAssembly. Setiap fungsi dapat ditampilkan dalam berbagai cara, dari kecil dan lambat hingga besar dan cepat.

V8 secara otomatis mengelola penggunaan memori dalam kategori ini. Jika suatu fungsi dijalankan berkali-kali, V8 akan menggunakan lebih banyak memori untuk fungsi tersebut agar fungsi dapat berjalan lebih cepat. Jika suatu fungsi tidak berjalan selama beberapa waktu, V8 dapat menghapus data internal untuk fungsi tersebut.

(concatenated string)

Saat V8 menyambungkan dua string, seperti dengan operator + JavaScript, V8 dapat memilih untuk menampilkan hasilnya secara internal sebagai "string yang digabungkan" yang juga dikenal sebagai struktur data Rope.

Alih-alih menyalin semua karakter dari dua string sumber ke dalam string baru, V8 mengalokasikan objek kecil dengan kolom internal yang disebut first dan second, yang mengarah ke dua string sumber. Hal ini memungkinkan V8 menghemat waktu dan memori. Dari perspektif kode JavaScript, ini hanyalah string normal, dan berperilaku seperti string lainnya.

InternalNode

Kategori ini mewakili objek yang dialokasikan di luar V8, seperti objek C++ yang ditentukan oleh Blink.

Tips: Jika InternalNode menyimpan banyak memori, sebaiknya lihat nama class C++, bukan InternalNode generik.

Untuk melihat nama class C++, gunakan Chrome untuk Pengujian dan lakukan hal berikut:

1. Buka DevTools dan aktifkan settings Settings > Experiments > check_box Show option to expose internals in heap snapshots.
2. Buka panel Memory, pilih radio_button_checked Heap snapshot, dan aktifkan check_box expose internals (termasuk detail khusus implementasi tambahan).
3. Rekonstruksi masalah yang menyebabkan InternalNode mempertahankan banyak memori.
4. Ambil cuplikan heap. Dalam snapshot ini, objek memiliki nama class C++, bukan InternalNode.

(object shape)

Seperti yang dijelaskan dalam Fast Properties in V8, V8 melacak class tersembunyi (atau bentuk) sehingga beberapa objek dengan properti yang sama dalam urutan yang sama dapat direpresentasikan secara efisien. Kategori ini berisi class tersembunyi tersebut, yang disebut system / Map (tidak terkait dengan JavaScript Map), dan data terkait.

(sliced string)

Saat V8 perlu mengambil substring, seperti saat kode JavaScript memanggil String.prototype.substring(), V8 dapat memilih untuk mengalokasikan objek string yang diiris, bukan menyalin semua karakter yang relevan dari string asli. Objek baru ini berisi pointer ke string asli dan menjelaskan rentang karakter mana dari string asli yang akan digunakan.

Dari perspektif kode JavaScript, ini hanyalah string normal, dan berperilaku seperti string lainnya. Jika string yang dipotong mempertahankan banyak memori, program mungkin telah memicu Masalah 2869 dan mungkin dapat memanfaatkan langkah-langkah yang disengaja untuk "meratakan" string yang dipotong.

system / Context

Objek internal jenis system / Context berisi variabel lokal dari penutupan—cakupan JavaScript yang dapat diakses oleh fungsi bertingkat.

Setiap instance fungsi berisi pointer internal ke Context tempat fungsi dieksekusi, sehingga dapat mengakses variabel tersebut. Meskipun objek Context tidak langsung terlihat dari JavaScript, Anda memiliki kontrol langsung atas objek tersebut.

(system)

Kategori ini berisi berbagai objek internal yang belum (belum) dikategorikan dengan cara yang lebih bermakna.

Tampilan perbandingan

Tampilan Perbandingan memungkinkan Anda menemukan objek yang bocor dengan membandingkan beberapa snapshot satu sama lain. Misalnya, melakukan suatu tindakan dan membalikkannya, seperti membuka dokumen dan menutupnya, seharusnya tidak meninggalkan objek tambahan.

Untuk memverifikasi bahwa operasi tertentu tidak menyebabkan kebocoran:

1. Ambil snapshot heap sebelum menjalankan operasi.
2. Lakukan operasi. Artinya, berinteraksi dengan halaman dengan cara yang menurut Anda mungkin menyebabkan kebocoran.
3. Lakukan operasi pembalikan. Artinya, lakukan interaksi yang sebaliknya dan ulangi beberapa kali.
4. Ambil snapshot heap kedua dan ubah tampilannya menjadi Perbandingan, yang membandingkannya dengan Snapshot 1.

Tampilan Comparison menunjukkan perbedaan antara dua snapshot. Saat meluaskan entri total, instance objek yang ditambahkan dan dihapus ditampilkan:

Tujuan: Coba halaman demo ini untuk mendapatkan gambaran tentang cara menggunakan perbandingan snapshot untuk mendeteksi kebocoran.

Tampilan Containment

Tampilan Containment adalah "tampilan menyeluruh" untuk struktur objek aplikasi. Dengan tampilan ini, Anda bisa melihat ke dalam closure fungsi, mengamati objek internal VM yang bersama-sama membentuk objek JavaScript, dan memahami berapa banyak memori yang digunakan aplikasi pada tingkat yang sangat rendah.

Tampilan ini menyediakan beberapa titik entri:

• Objek DOMWindow. Objek global untuk kode JavaScript.
• GC root. Akar GC yang digunakan oleh pengumpulan sampah VM. Akar GC dapat terdiri dari peta objek, tabel simbol, tumpukan thread VM, cache kompilasi, cakupan handle, dan handle global bawaan.
• Objek native. Objek browser "didorong" ke dalam mesin virtual JavaScript untuk memungkinkan otomatisasi, misalnya, node DOM dan aturan CSS.

Bagian Penahan

Bagian Retainers di bagian bawah panel Memory menampilkan objek yang mengarah ke objek yang dipilih dalam tampilan. Panel Memory memperbarui bagian Retainers saat Anda memilih objek lain di tampilan apa pun kecuali Statistics.

Dalam contoh ini, string yang dipilih dipertahankan oleh properti x dari instance Item.

Mengabaikan retainer

Anda dapat menyembunyikan penahan untuk mengetahui apakah objek lain mempertahankan objek yang dipilih. Dengan opsi ini, Anda tidak perlu menghapus penahan ini dari kode terlebih dahulu, lalu mengambil ulang snapshot heap.

Untuk menyembunyikan retainer, klik kanan dan pilih Ignore this retainer. Retainer yang diabaikan ditandai sebagai ignored di kolom Jarak. Untuk berhenti mengabaikan semua retensi, klik playlist_remove Restore ignored retainers di panel tindakan di bagian atas.

Menemukan objek tertentu

Untuk menemukan objek di heap yang dikumpulkan, Anda dapat menelusuri menggunakan Ctrl + F dan memasukkan ID objek.

Memberi nama fungsi untuk membedakan penutupan

Sebaiknya fungsi diberi nama, untuk memudahkan membedakan closure di cuplikan.

Misalnya, kode berikut tidak menggunakan fungsi yang bernama:

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function() { // this is NOT a named function
    return largeStr;
  };

  return lC;
}

Meskipun contoh ini menjalankan:

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function lC() { // this IS a named function
    return largeStr;
  };

  return lC;
}

Tujuan: Coba contoh ini yang menunjukkan mengapa eval is evil untuk menganalisis dampak penutupan pada memori. Anda juga mungkin tertarik untuk menindaklanjutinya dengan contoh ini yang akan memandu Anda merekam alokasi heap.

Mengungkap kebocoran DOM

Profiler heap memiliki kemampuan untuk mencerminkan dependensi dua arah antara objek bawaan browser (node DOM dan aturan CSS) dan objek JavaScript. Hal ini membantu menemukan kebocoran tersembunyi yang terjadi karena keberadaan subpohon DOM yang terlepas dan terlupakan.

Kebocoran DOM bisa lebih besar dari yang Anda kira. Perhatikan contoh berikut. Kapan sampah #tree akan dibersihkan?

  var select = document.querySelector;
  var treeRef = select("#tree");
  var leafRef = select("#leaf");
  var body = select("body");

  body.removeChild(treeRef);

  //#tree can't be GC yet due to treeRef
  treeRef = null;

  //#tree can't be GC yet due to indirect
  //reference from leafRef

  leafRef = null;
  //#NOW #tree can be garbage collected

#leaf mempertahankan referensi ke induknya (parentNode) dan secara rekursif hingga #tree, sehingga hanya saat leafRef dihapus, pohon keseluruhan di bawah #tree menjadi kandidat untuk GC.

Tujuan: Coba contoh kebocoran node DOM ini untuk memahami tempat node DOM dapat bocor dan cara mendeteksinya. Anda dapat menindaklanjutinya dengan melihat contoh kebocoran DOM yang lebih besar dari yang diperkirakan ini.