jQuery atau javascript untuk menemukan penggunaan memori halaman

98

Apakah ada cara untuk mengetahui berapa banyak memori yang digunakan oleh halaman web, atau oleh aplikasi jquery saya?

Inilah situasi saya:

Saya sedang membangun aplikasi web dengan banyak data menggunakan jquery frontend dan backend tenang yang menyajikan data dalam JSON. Halaman dimuat sekali, dan kemudian semuanya terjadi melalui ajax.

UI memberi pengguna cara untuk membuat banyak tab dalam UI, dan setiap tab dapat berisi banyak sekali data. Saya mempertimbangkan untuk membatasi jumlah tab yang dapat mereka buat, tetapi saya berpikir alangkah baiknya untuk hanya membatasinya setelah penggunaan memori telah melampaui ambang tertentu.

Berdasarkan jawaban tersebut, saya ingin membuat beberapa klarifikasi:

  • Saya mencari solusi runtime (bukan hanya alat pengembang), sehingga aplikasi saya dapat menentukan tindakan berdasarkan penggunaan memori di browser pengguna.
  • Menghitung elemen DOM atau ukuran dokumen mungkin merupakan perkiraan yang baik, tetapi bisa jadi sangat tidak akurat karena tidak akan menyertakan pengikatan peristiwa, data (), plugin, dan struktur data dalam memori lainnya.
javascript  jquery  memory  memory-management 
— Tauren
sumber
Anda harus menyelidiki jenis pengguna untuk aplikasi web Anda untuk menentukan apakah mereka memiliki masalah memori atau tidak saat menggunakan aplikasi web Anda. Atau apakah Anda sendiri mengalami masalah memori / kinerja dengan aplikasi web Anda?
— Jawaban menjawab
@Prutswonder: Tidak, saya tidak mengalami masalah, tetapi saya hanya ingin tahu apakah alat seperti itu ada. Hanya berpikir bahwa daripada hanya menetapkan batas tetap pada tab, metode dinamis itu mungkin keren.
— Tauren
Saya baru saja menambahkan beberapa detail tambahan ke pertanyaan untuk membantu mengklarifikasi bahwa saya mencari solusi runtime, bukan solusi waktu pembangunan.
— Tauren
2
Hanya sebuah pertanyaan, jika sesuatu telah disimpan dalam cache, apakah itu masih dihitung?
— ajax333221

Jawaban:

65

Pembaruan 2015

Kembali pada tahun 2012 ini tidak mungkin, jika Anda ingin mendukung semua browser utama yang sedang digunakan. Sayangnya, saat ini fitur ini masih hanya untuk Chrome (ekstensi non-standar window.performance).

window.performance.memory

Dukungan browser: Chrome 6+

Jawaban 2012

Apakah ada cara untuk mengetahui berapa banyak memori yang digunakan oleh halaman web, atau oleh aplikasi jquery saya? Saya mencari solusi runtime (bukan hanya alat pengembang), sehingga aplikasi saya dapat menentukan tindakan berdasarkan penggunaan memori di browser pengguna.

Jawaban yang sederhana namun benar adalah tidak . Tidak semua browser memaparkan data seperti itu kepada Anda. Dan saya pikir Anda harus membuang ide itu hanya karena kompleksitas dan ketidakakuratan dari solusi "buatan tangan" dapat menimbulkan lebih banyak masalah daripada memecahkannya.

Menghitung elemen DOM atau ukuran dokumen mungkin merupakan perkiraan yang baik, tetapi bisa jadi sangat tidak akurat karena tidak akan menyertakan pengikatan peristiwa, data (), plugin, dan struktur data dalam memori lainnya.

Jika Anda benar-benar ingin tetap berpegang pada ide Anda, Anda harus memisahkan konten tetap dan dinamis.

Konten tetap tidak bergantung pada tindakan pengguna (memori yang digunakan oleh file skrip, plugin, dll.)
Segala sesuatu yang lain dianggap dinamis dan harus menjadi fokus utama Anda saat menentukan batas Anda.

Tetapi tidak ada cara mudah untuk meringkasnya. Anda bisa menerapkan pelacakan sistem yang mengumpulkan semua informasi ini. Semua operasi harus memanggil metode pelacakan yang sesuai. misalnya:

Bungkus atau timpa jQuery.datametode untuk menginformasikan pelacakan sistem tentang alokasi data Anda.

Bungkus manipulasi html sehingga menambah atau menghapus konten juga terlacak ( innerHTML.lengthmerupakan perkiraan terbaik).

Jika Anda menyimpan objek dalam memori yang besar, mereka juga harus dipantau.

Adapun pengikatan acara, Anda harus menggunakan delegasi acara dan kemudian itu juga bisa dianggap sebagai faktor yang agak tetap.

Aspek lain yang membuat Anda sulit memperkirakan kebutuhan memori dengan benar adalah browser yang berbeda mungkin mengalokasikan memori secara berbeda (untuk objek Javascript dan elemen DOM).

— gblazex.dll
sumber
Tidak innerHTML.lengthmengambil memori atau RAM atau CPU (atau apa pun, saya tidak tahu) untuk memproses juga?
— mrReiha
Dukungan browser untuk fitur ini BUKAN IE9 + atau apa pun selain Chrome. Window.performance.memory hanya untuk Chrome. docs.webplatform.org/wiki/apis/timing/properties/memory
— Blunderfest
Anda benar, saya pikir memori adalah bagian dari standar pengaturan waktu navigasi dan window.performanceobjeknya. Entri lama "didukung oleh" berlaku untuk standar itu. window.performance.memorydianggap sebagai ekstensi non-standar oleh Chrome.
— gblazex
Untuk mengaktifkan pemantauan memori waktu nyata melalui window.performance.memory, Anda perlu memulai Chrome dengan tanda --enable-precision-memory-info.
— kluverua
Pembaruan: Opera juga mendukung ini. Sumber: Mozilla. developer.mozilla.org/en-US/docs/Web/API/…
— HoldOffHunger
39

Anda dapat menggunakan API Waktu Navigasi .

Waktu Navigasi adalah API JavaScript untuk mengukur kinerja di web secara akurat. API menyediakan cara sederhana untuk mendapatkan statistik waktu yang akurat dan mendetail — secara native — untuk navigasi halaman dan peristiwa pemuatan.

window.performance.memory memberikan akses ke data penggunaan memori JavaScript.


Bacaan yang direkomendasikan

— Sindre Sorhus
sumber
Saran bagus. Terima kasih.
— MaximOrlovsky
21

Pertanyaan ini sudah berusia 5 tahun, dan javascript dan browser telah berkembang luar biasa saat ini. Karena sekarang ini mungkin (setidaknya di beberapa browser), dan pertanyaan ini adalah hasil pertama saat Anda menggunakan Google "javascript show memory use", saya pikir saya akan menawarkan solusi modern.

memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master

Skrip ini (yang dapat Anda jalankan kapan saja di halaman mana saja) akan menampilkan penggunaan memori halaman saat ini: 

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);
Luaskan cuplikan

— Dustin Brownell
sumber
1
Ini sepertinya melaporkan penggunaan memori JS dan bukan penggunaan memori halaman, Task Manager bawaan Chrome mengatakan Gmail menggunakan 250MB sementara memory-stats.js melaporkan 33,7MB
— Brandito
Tidak ada lisensi yang terdaftar untuk halaman github bookmarklet.js, jadi mungkin hak cipta, kekayaan intelektual. Itu meninggalkan tingkat ketidakpastian dalam bergantung pada proyek itu.
— HoldOffHunger
8

Saya tidak tahu cara apa pun yang Anda dapat benar-benar mengetahui berapa banyak memori yang digunakan oleh browser, tetapi Anda mungkin dapat menggunakan heuristik berdasarkan jumlah elemen pada halaman. Uinsg jQuery, Anda bisa melakukannya $('*').lengthdan itu akan memberi Anda hitungan jumlah elemen DOM. Sejujurnya, mungkin lebih mudah hanya untuk melakukan beberapa pengujian kegunaan dan menghasilkan sejumlah tab untuk mendukung.

— tvanfosson.dll
sumber
3
@tvanfosson: bukan ide yang buruk, tetapi ini tidak akan memberi saya informasi tentang memori non-DOM, seperti .data () dan dalam struktur data memori. Tapi itu bisa memberikan perkiraan yang baik tentang berat keseluruhan yang bisa saya gunakan.
— Tauren
4

Gunakan alat Cuplikan Heap Chrome

Ada juga alat Firebug yang disebut MemoryBug tetapi tampaknya belum terlalu matang.

— Pablo Fernandez
sumber
@Pablo: Terima kasih. Saya pasti akan menggunakan alat dev, tetapi berharap menemukan sesuatu yang dapat saya gunakan selama runtime untuk menemukan penggunaan memori di setiap browser pengguna.
— Tauren
3

Jika Anda ingin melihat untuk pengujian ada cara di Chrome melalui halaman pengembang untuk melacak penggunaan memori, tetapi tidak yakin bagaimana melakukannya di javascript secara langsung.

— Zachary K
sumber
@ Zachary: Terima kasih. Saya pasti akan menggunakan alat pengembang, tetapi berharap menemukan solusi analitik waktu proses.
— Tauren
1
Jika Anda menemukan satu, beri tahu saya, saya ingin sekali memilikinya
— Zachary K
3

Saya ingin menyarankan solusi yang sama sekali berbeda dari jawaban lain, yaitu mengamati kecepatan aplikasi Anda dan setelah turun di bawah level yang ditentukan, tunjukkan tip kepada pengguna untuk menutup tab, atau menonaktifkan tab baru agar tidak terbuka. Kelas sederhana yang menyediakan informasi semacam ini misalnya https://github.com/mrdoob/stats.js . Selain itu, mungkin tidak bijaksana untuk aplikasi yang begitu intensif untuk menyimpan semua tab di memori. Misalnya hanya menyimpan status pengguna (gulir) dan memuat semua data setiap kali semua kecuali dua tab terakhir terbuka mungkin merupakan opsi yang lebih aman.

Terakhir, pengembang webkit telah membahas tentang menambahkan informasi memori ke javascript, tetapi mereka mendapatkan sejumlah argumen tentang apa dan apa yang tidak boleh diekspos. Bagaimanapun, bukan tidak mungkin informasi semacam ini akan tersedia dalam beberapa tahun (meskipun informasi itu tidak terlalu berguna untuk saat ini).

— David Mulder
sumber
1

Waktu pertanyaan yang tepat dengan saya memulai proyek serupa!

Tidak ada cara yang akurat untuk memantau penggunaan memori JS dalam aplikasi karena akan membutuhkan hak tingkat yang lebih tinggi. Seperti yang disebutkan dalam komentar, memeriksa jumlah semua elemen, dll. Akan membuang-buang waktu karena mengabaikan peristiwa terikat, dll.

Ini akan menjadi masalah arsitektur jika manifes kebocoran memori atau elemen yang tidak digunakan tetap ada. Memastikan bahwa konten tab yang ditutup dihapus sepenuhnya tanpa penangan acara berlama-lama, dll. Akan sempurna; dengan asumsi bahwa itu sudah selesai Anda bisa saja mensimulasikan penggunaan berat di browser dan mengekstrapolasi hasil dari pemantauan memori (ketik about: memory di bilah alamat)

Protip: jika Anda membuka halaman yang sama di IE, FF, Safari ... dan Chrome; dan daripada menavigasi ke about: memory di Chrome, itu akan melaporkan penggunaan memori di semua browser lain. Rapi!

— ov
sumber
0

Apa yang mungkin ingin Anda lakukan adalah meminta server melacak bandwidth mereka untuk sesi itu (berapa banyak byte data yang telah dikirim ke mereka). Ketika mereka melewati batas, daripada mengirim data melalui ajax, server harus mengirim kode kesalahan yang akan digunakan javascript untuk memberi tahu pengguna bahwa mereka telah menggunakan terlalu banyak data.

— Cam
sumber
@ incrediman: itu ide yang bagus juga, tapi saya rasa itu tidak akan berhasil tanpa membangun banyak fitur pelacakan - hanya hitungan byte tidak akan berhasil. Masalahnya adalah bahwa data dalam tab adalah daftar yang akan difilter dan disortir oleh pengguna dengan berbagai cara. Setiap kali mereka membuat perubahan, data baru akan diambil dari server dan mengganti elemen dom saat ini. Plus, apa yang dikatakan mereka tidak menekan "muat ulang", dan mulai dengan halaman baru? Saya harus melacak 304 dan seterusnya, tetapi saya bermaksud untuk hanya menyajikan html statis, semua data berasal dari layanan REST.
— Tauren
Pendekatan ini tidak memperhitungkan elemen yang dibuat atau dihancurkan dengan createElement () atau remove (), yang akan memengaruhi penggunaan memori klien. Tapi ini menarik berbeda dari jawaban lain (dengan mengukur sisi server, dan bukan sisi klien, pengukuran Anda tidak mengubah memori, seperti jawaban lain).
— HoldOffHunger
0

Anda bisa mendapatkan document.documentElement.innerHTML dan memeriksa panjangnya. Ini akan memberi Anda jumlah byte yang digunakan oleh halaman web Anda.

Ini mungkin tidak bekerja di semua browser. Jadi Anda bisa memasukkan semua elemen tubuh Anda dalam div raksasa dan memanggil innerhtml di div itu. Sesuatu seperti<body><div id="giantDiv">...</div></body>

— Midhat
sumber
4
Panjang dari innerHTMLstring yang dihasilkan tidak mungkin terkorelasi secara berguna dengan memori yang digunakan browser (misalnya, dalam model objek internalnya) untuk merender HTML itu.
— TJ Crowder
dan mengapa demikian? Alasan saya adalah jika beberapa teks dimuat di browser, itu harus disimpan di memori. SO itu memberikan beberapa ukuran memori yang digunakan oleh browser untuk merender halaman.
— Midhat
4
Pikirkan seperti ini. Jika Anda mengatakan "Saya ingin memberi Anda 10 juta dolar", itu adalah 8 kata. Di sisi lain, jika Anda berkata "Saya ingin bersin di atas serbet Anda", itu 7. Apakah yang pertama hanya 8/7 lebih berharga dari yang kedua?
— Intuisi
1
Ini mirip dengan saran @tvanfosson untuk menghitung jumlah elemen DOM. Anda mungkin sedikit lebih akurat karena elemen dom yang berbeda dapat berisi jumlah teks yang berbeda. Tapi masih belum mendapatkan informasi apapun tentang data (), click handers, dalam struktur data memori dan objek, dan lain sebagainya. Aplikasi saya menggunakan banyak fitur ini.
— Tauren
1
Mungkin ada variabel JS dalam cakupan yang mengarah ke simpul DOM yang terlepas, yang tidak akan menjadi bagian dari elemen dokumen. Anda juga dapat menulis kode untuk memuat string yang sangat panjang ke dalam variabel, menggunakan memori gigabyte, tanpa memengaruhi teks pada halaman.
— Josh Ribakoff
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.