Ajax Journal

Blog francophone sur Ajax

Ajax et les fuites de mémoires

Une fuite de mémoire ou memory leak en anglais est une consommation involontaire de mémoire par un programme informatique, généralement due au fait que le programme ne libère pas la mémoire dont il n'a plus besoin de facon convenable. Cela entraine des ralentissements des programmes voir des plantages.

Concept bien connu des développeurs C, les fuites de mémoires étaient pour le moment bien loin des préoupations des développeurs d'applications web. Cependant avec Ajax, la donne a changé. En effet, avant l'arrivée du web 2.0, l'utilisation de javascript dans les pages web était relativement simple et surtout à chaque changement ou rechargement de page, le Garbage Collector - Ramasse-miettes en francais - faisait son office est désaloué les objets javascripts utilisés par la page précédente.

Mais vous l'auriez bien compris, le problème vient qu'avec Ajax la page web n'est plus rechargée, elle est modifiée à la volé, et de nouveaux objets javascripts sont sans cesses créés. Le garbage collector ne désaloue donc pas les objets non utilisées. Il faut le faire explicitement pour eviter les fuites de mémoire. Ces fuites de mémoires peuvent prendre des proportions assez importante, alors soyez vigilant.

De plus il existe d'autre cas non liés exclusivement à l'utilisation d'Ajax qui peuvent provoquer des fuites de mémoires, Internet Explorer semble être enclin à se laisser aller dans ce secteur. (Encore lui !) Le garbage collector de l'interpreteur Javascript d'IE ne semble pas capable de detecter des références circulaires entre des noeuds DOM et d'autre objets. Ce problème vien(drai)t du faire que les objets JS et les objets DOM sont gérés par deux composants différents. L'article DHTML leaks like a sieve (une lecture chaudement recommandée) revient sur les problèmes causés par les références circulaires (la gestion des évenement, les fermetures) et donne quelques exemples de code javascript provoquant des fuites de mémoire.

var unDiv = document.getElementById('unDiv');
monObjetJS.unObjetDom = unDiv; 
unDiv.unObjet = monObjetJS;

Ce code provoque une référence circulaire, monObjetJS ayant une référence du unDiv et unDiv ayant une référence vers monObjetJS.

Il faut également noté que les handler d'évenement peuvent également créer des références circulaires si celui-ci référence un objet javascript. Il faut donc autant que possible décrocher les handlers d'évenement lorsqu'ils ne sont plus utilisés.

Un article sur le wiki mozilla pour les développeurs traite également de ces problèmes

Ce problème de fuite de mémoire n'est pas spécifique à IE, tous les navigateurs peuvent en être victimes. Pour preuve, Firefox a plusieurs bugs pouvant provoquer des fuites de mémoires.

Enfin pour terminer ce post, un outil utile. Pour détecter ces fuites de mémoire, David Baron (développeur Mozilla) a développé une petite extension firefox avertissant des blocs de mémoire perdus lorsque l'on quitte une page web. Bien pratique.

Note : 4.3/5 pour 20 votes

Outils pour le développement sous Firefox

Firefox via son système d'extension permet à un miriade d'outil de faciliter la vie des développeurs d'applications web. Parmis la multitude d'extensions disponibles, en voici trois, vraiment indispensables.

Firebug est un outil permettant de grandement faciliter le débugage d'application web, en effet il propose au coeur de la même extension, un inspecteur DOM, une console javascript évoluée, un débugger javascript. L'une des killer features de firebug est la possibilité de voir les requêtes XMLHttpRequest effectuées par l'application, tellement pratique pour débugger de l'Ajax.

La Web developper toolbar est comme son nom l'indique à nos amis anglophones, une barre d'outils destinée aux développeurs web. Elle apporte son lot d'outils allant de l'éditeur CSS, à la validation de page XHTML en passant par l'affichages des id des balises en surimpression sur la page web.

Le Venkman Debugger est un débugger Javascript très complet proposant toutes les fonctionnalités attendues d'un débugger. Il permet même de débugger les fichiers javascripts qui animent Firefox. (attention cette extension est un peu lourde en terme de ressources consommées).

Bref, 3 extensions à installer de toute urgence si vous utilisez Firefox.

Note : 4.0/5 pour 8 votes

Mettre en place un indicateur d'activité

Que se cache derrière ce titre obscure ? Tout simplement un article expliquant la facon de bien mettre en place un , devenu quasiment synonyme d'application web 2.0 depuis l'avènement d'ajax. GenXDesign propose ainsi un article de 4 pages sur le sujet, CSS et Javascript sont au menu, et bien évidemment l'ensemble se termine par une page de démo.

Note : 3.9/5 pour 10 votes

Ajax et la sécurité

Max Kiesler recense sur son blog 24 tutoriels en rapport avec Ajax et la sécurité, ces tutoriels mettant en lumière les erreurs à ne pas commettre et les problèmes de sécurités que l'on peut rencontrer avec les applications Web 2.0.

Une ressource indispensable.

Note : 3.7/5 pour 16 votes