jQuery ou javascript pour trouver l'utilisation de la mémoire de la page
Existe-t-il un moyen de connaître la quantité de mémoire utilisée par une page Web ou par mon application jquery?
Voici ma situation:
Je suis en train de créer une webapp lourde de données en utilisant un frontend jquery et un backend reposant qui sert des données en JSON. La page est chargée une fois, puis tout se passe via ajax.
L'interface utilisateur offre aux utilisateurs un moyen de créer plusieurs onglets au sein de l'interface utilisateur, et chaque onglet peut contenir beaucoup, beaucoup de données. J'envisage de limiter le nombre d'onglets qu'ils peuvent créer, mais je pensais que ce serait bien de les limiter uniquement lorsque l'utilisation de la mémoire a dépassé un certain seuil.
Sur la base des réponses, j'aimerais apporter quelques clarifications:
- Je recherche une solution d'exécution (pas seulement des outils de développement), afin que mon application puisse déterminer des actions basées sur l'utilisation de la mémoire dans le navigateur d'un utilisateur.
- Le comptage des éléments DOM ou de la taille du document peut être une bonne estimation, mais il peut être assez inexact car il n'inclut pas la liaison d'événements, data (), les plugins et autres structures de données en mémoire.
Mise à jour 2015
En 2012, cela n'était pas possible, si vous vouliez prendre en charge tous les principaux navigateurs utilisés. Malheureusement, pour le moment, il s'agit toujours d'une fonctionnalité Chrome uniquement (une extension non standard de window.performance).
window.performance.memory
Prise en charge du navigateur: Chrome 6+
Réponse 2012
Existe-t-il un moyen de connaître la quantité de mémoire utilisée par une page Web ou par mon application jquery? Je recherche une solution d'exécution (pas seulement des outils de développement), afin que mon application puisse déterminer des actions basées sur l'utilisation de la mémoire dans le navigateur d'un utilisateur.
La réponse simple mais correcte est non . Tous les navigateurs ne vous exposent pas ces données. Et je pense que vous devriez abandonner l'idée simplement parce que la complexité et l'inexactitude d'une solution "faite main" peut introduire plus de problèmes qu'elle n'en résout.
Le comptage des éléments DOM ou de la taille du document peut être une bonne estimation, mais il peut être assez inexact car il n'inclut pas la liaison d'événements, data (), les plugins et autres structures de données en mémoire.
Si vous voulez vraiment vous en tenir à votre idée, vous devez séparer le contenu fixe et le contenu dynamique.
Le contenu fixe ne dépend pas des actions de l'utilisateur (mémoire utilisée par les fichiers de script, les plugins, etc.)
Tout le reste est considéré comme dynamique et devrait être votre objectif principal lors de la détermination de votre limite.
Mais il n'y a pas de moyen facile de les résumer. Vous pouvez implémenter un système tracking qui rassemble toutes ces informations. Toutes les opérations doivent appeler les méthodes de suivi appropriées. par exemple:
Envelopper ou écraser jQuery.data méthode pour informer le système tracking de vos allocations de données.
Enveloppez les manipulations html pour que l'ajout ou la suppression de contenu soit également suivi (innerHTML.length est la meilleure estimation).
Si vous conservez de gros objets en mémoire, ils doivent également être surveillés.
Quant à la liaison d'événement, vous devez utiliser délégation d'événement et cela pourrait également être considéré comme un facteur quelque peu fixe.
Un autre aspect qui rend difficile l'estimation correcte de vos besoins en mémoire est que différents navigateurs peuvent allouer la mémoire différemment (pour les objets Javascript et les éléments DOM).
Vous pouvez utiliser API de synchronisation de navigation .
Navigation Timing est une API JavaScript pour mesurer avec précision les performances sur le Web. L'API fournit un moyen simple d'obtenir des statistiques de synchronisation précises et détaillées, en mode natif, pour la navigation dans les pages et les événements de chargement.
window.performance.memory donne accès aux données d'utilisation de la mémoire JavaScript.
Lecture recommandée
Cette question a 5 ans, et javascript et les navigateurs ont évolué incroyablement dans ce temps. Étant donné que cela est désormais possible (dans au moins certains navigateurs), et que cette question est le premier résultat lorsque vous utilisez Google "javascript show memory useage", j'ai pensé proposer une solution moderne.
memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master
Ce script (que vous pouvez exécuter à tout moment sur n'importe quelle page) affichera l'utilisation actuelle de la mémoire de la page:
var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);Je ne connais aucun moyen de découvrir la quantité de mémoire utilisée par le navigateur, mais vous pourriez peut-être utiliser une heuristique basée sur le nombre d'éléments sur la page. Uinsg jQuery, vous pouvez faire $('*').length et cela vous donnera le nombre d'éléments DOM. Honnêtement, cependant, il est probablement plus facile de faire quelques tests d'utilisabilité et de proposer un nombre fixe d'onglets à prendre en charge.
Utilisez outil d'instantané de tas de Chrome
Il existe également un outil Firebug appelé MemoryBug mais il semble qu'il ne soit pas encore très mature.
Je voudrais suggérer une solution entièrement différente des autres réponses, à savoir observer la vitesse de votre application et une fois qu'elle descend en dessous des niveaux définis, soit montrer à l'utilisateur des conseils pour fermer les onglets, soit désactiver l'ouverture de nouveaux onglets. Une classe simple qui fournit ce type d'informations est par exemple https://github.com/mrdoob/stats.js . En dehors de cela, il n'est peut-être pas judicieux pour une application aussi intensive de conserver tous les onglets en mémoire en premier lieu. Par exemple. conserver uniquement l'état utilisateur (défilement) et charger toutes les données à chaque fois, sauf les deux derniers onglets, peut être une option plus sûre.
Enfin, les développeurs de webkit ont discuté de l'ajout d'informations de mémoire au javascript, mais ils ont obtenu un certain nombre d'arguments sur ce qui et ce qui ne devrait pas être exposé. Quoi qu'il en soit, il n'est pas improbable que ce type d'informations soit disponible dans quelques années (bien que ces informations ne soient pas trop utiles pour le moment).
Si vous souhaitez simplement voir pour les tests, il existe un moyen dans Chrome via la page du développeur pour suivre l'utilisation de la mémoire, mais vous ne savez pas comment le faire directement en javascript.
C'est le moment idéal pour poser des questions avec moi pour commencer un projet similaire!
Il n'existe aucun moyen précis de surveiller l'utilisation de la mémoire JS dans l'application, car cela nécessiterait des privilèges de niveau supérieur. Comme mentionné dans les commentaires, vérifier le nombre de tous les éléments, etc. serait une perte de temps car il ignore les événements liés, etc.
Ce serait un problème d'architecture si des fuites de mémoire manifestes ou des éléments inutilisés persistent. S'assurer que le contenu des onglets fermés est complètement supprimé sans les gestionnaires d'événements persistants, etc. serait parfait; en supposant que c'est fait, vous pouvez simplement simuler une utilisation intensive dans un navigateur et extrapoler les résultats de la surveillance de la mémoire (tapez about: memory dans la barre d'adresse)
Protip: si vous ouvrez la même page dans IE, FF, Safari ... et Chrome; et que vous accédez à about: memory dans Chrome, il signalera l'utilisation de la mémoire sur tous les autres navigateurs. Soigné!
Ce que vous pourriez vouloir faire, c'est que le serveur garde une trace de leur bande passante pour cette session (combien d'octets de données leur ont été envoyés). Quand ils dépassent la limite, au lieu d'envoyer des données via ajax, le serveur doit envoyer un code d'erreur que javascript utilisera pour dire à l'utilisateur qu'il a utilisé trop de données.
Vous pouvez obtenir le document.documentElement.innerHTML et vérifier sa longueur. Cela vous donnerait le nombre d'octets utilisés par votre page Web.
Cela peut ne pas fonctionner dans tous les navigateurs. Vous pouvez donc enfermer tous vos éléments corporels dans un div géant et appeler innerhtml sur ce div. Quelque chose comme <body><div id="giantDiv">...</div></body>