8
votes

Comment fonctionne la mémoire JavaScript dans les navigateurs?

Lorsque vous construisez des interfaces et des jeux JS avancés, j'ai constaté que je devais creuser plus profondément dans la façon dont les navigateurs gère la mémoire pour JS. Mon expérience avec la mémoire et Javascript est que la mémoire est gonflée (et fait des animations et des calculs lents / à la traîne) lorsque:

  • Il y a beaucoup de contenu généré par JS Sur la page
  • Il y a beaucoup de graphiques (IMG-ELEMENTS) sur la page?

    J'ai donc conclu que si je veux garder ma mémoire fraîche, je devrais inclure autant de code HTML que possible depuis le début du document tel qu'il sera mis en cache et non conservé en mémoire. Et hors du parcours Supprimer tous les éléments actuellement utilisés.

    Quelqu'un a-t-il plus d'informations sur cela? Ressources? Liens?


2 commentaires

Qu'est-ce que tu veux dire exactement par "mis en cache et non gardé en mémoire"? Cela n'a aucun sens pour moi.


Je ne suis pas de matériel pro dans celui-ci. Je suppose que je suppose que la différence est une différence si un fichier est lu dans le cache ou la mémoire. Mais là encore, peut-être que tous les fichiers mis en cache sont passés à travers la mémoire. Ou peut-être que la mémoire est la même que le cache dans cet exemple. Comme je l'ai dit, je ne sais pas vraiment comment ça va ensemble. C'est pourquoi je demande :)


3 Réponses :


3
votes

pour commencer. Tous les HTML, que ce soit "incluent depuis le début" ou non, est conservé en mémoire. Très probablement, tous les contenus d'image de la page en cours. À un minimum nu, tout ce que vous voyez à l'écran à un moment donné est conservé en mémoire à cette époque.


3 commentaires

Je viens de savoir qu'il y a une limite à la façon dont les navigateurs gère la mémoire. Je veux dire, vous pouvez faire beaucoup plus de script intense en flash que vous ne pouvez en JavaScript avant de vous lancer dans des problèmes de retardement. Quelque chose tient mon script de retour à droite? Quelques restrictions au script de navigateur en général?


Vous pouvez faire beaucoup plus de script intense en flash car il possède un moteur de script très rapide. Une variante sur ce moteur (Tamarin) est maintenant à Firefox, tandis que Safari et Chrome ont à la fois de nouvelles rapides de leur propre. Hélas Internet Explorer est à la traîne quelque peu.


Ah, je c. C'est donc le moteur qui est lent et vieux. Les figures. J'aime vraiment le moteur Chromes.



2
votes

Il a tendance à dépendre davantage sur ce que vous faites avec elle pour être honnête. Beaucoup de graphiques ne vont pas accroupir à JavaScript si vous n'interagissez pas avec eux, mais si vous avez une énorme page remplie d'éléments différents et que vous recherchez le document complet pour un seul élément, c'est un élément différent. chose entièrement.

J'ai eu des problèmes de faire des choses comme ajouter des quantités massives d'événements aux pages. Courir trop de boucles dans une page et trop de minuteries.

Si la performance de JavaScript est un problème et que vous prévoyez de faire de la prise javascript intensif, vous voudrez peut-être consulter webworkers . Voici quelques autres liens sur webworkers:


1 commentaires

L'utilisation de travailleurs Web n'est pas encore traitée. Les navigateurs modernes doivent encore atteindre le monde rural du Web.



7
votes

Certaines choses à garder à l'esprit:

  • Ie est tué par la complexité DOM. Plus les éléments font partie de la page, plus il est lent. J'ai vu des pages ralentissement sensiblement avec aussi peu que 3 000 éléments sur eux (si vous avez une grille avec 10 colonnes et 100 rangées, c'est 1000 éléments là-bas). La bonne approche est généralement de décharger des pièces cachées du DOM (détacher-les)
  • IE a également une longue histoire de non-libérant correctement des éléments HTML s'ils disposent de manutentionnaires JavaScript attachés. Si vous avez une page de longue durée qui est souvent rafraîchie, lisez sur les fuites de mémoire IE et sur la manière de travailler autour de ces problèmes.
  • Tous les navigateurs stockent des images non compressées en mémoire. Donc, si vous préchargez une gagnière de grandes images à l'arrière-plan, c'est généralement une mauvaise idée.
  • Mise à jour des propriétés DOM entraînera des réflexions de page, qui sur des pages complexes peuvent prendre beaucoup de temps. Parfois, même récupérer des propriétés DOM (par exemple offsetheight) sera très très lente.

    En règle générale, JavaScript n'est pas un goulot d'étranglement de la performance. Ce qui tue c'est l'interaction avec le DOM. Le code qui ne touche pas le DOM rarement a des problèmes de performance. Il n'y a que des règles de pouce ici: interagissez avec le DOM le plus rarement possible, gardez la complexité DOM aussi bas que possible, évitez les réflexions de page répétées.


7 commentaires

D'accord. L'interaction avec le DOM est donc un problème également. Surtout un grand. Bon à savoir. Que se passe-t-il si je change / réduit le DOM-Tree? Est-ce que cela ajoutez à la mémoire (stocke des révisions?) Ou cela allégera-t-il vraiment la charge? Avec "page de réflexion", vous voulez dire une mise à jour de tous les éléments de documents en fonction du modèle de formatage visuel?


Vous pouvez trouver cela utile: Slideshare.net/lsimon/go-with-the- Refefow , aussi, ceci: bibliothèque.mozilla.org/...


L'arbre DOM n'est pas révisé. Si vous détachez quelque chose de l'arbre DOM et que vous n'avez aucune référence à partir de JavaScript (pas aussi simple que cela sonne, à cause de chaînes de prototype), alors il sera recueilli à la poubelle.


Super! Je peux toujours les ordures manuellement collectionner pour être sûre de bien sûr? Je me souviens que de retour dans les jours qui sont ce que les gens ont fait avec une certaine situation dans IE.


Je me demande si Itäs juste des changements structurels sur le DOM qui compte, comme l'élimination ou l'ajout de nouveaux éléments. Ou des modifications apportées aux attributs existants (comme l'attribut de classe) forçant également un redessinement? Homme, j'apprécie les informations d'experts! :)


Oubliez-le (un peu) Je pose des questions avant de regarder les liens de ressources. Je reviendrai à toi tous. :)


Ce truc est trop compliqué pour expliquer en détail dans les commentaires, les liens devraient vous donner une meilleure explication que possible.