jQuery atau javascript untuk menemukan penggunaan memori halaman

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.

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).

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

• Mengukur kecepatan muat halaman dengan Waktu Navigasi

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);

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.

Gunakan alat Cuplikan Heap Chrome

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

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.

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).

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!

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.

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>