Brico-Info - le blog de Bruno CATTEAU

En cette periode de sortie des nouvelles versions de Internet Explorer et Firefox, j'ai voulu vérifier ce que l'on dit (IE c'est nul, Opéra, il parait que c'est hyper rapide, etc...)

J'ai testé un ensemble de petits scripts javascript téléchargeables ici. En gros, le principe est de faire en boucle plusieurs fois une même action pour mettre en evidence une lenteur ou une rapidité relative... A noter que ce n'est peut etre pas l'action en elle même qui crée une lenteur, mais peut être la succession de cette action. L'exemple typique est d'executer 10 000 fois document.getElementById('id_div').innerHTML += 'toto'; ...

Les navigateurs séléctionnés sont les suivants :

                                                          
Opera 9.0  Firefox 1.5  Firefox 2.0  Internet Explorer 6  Internet Explorer 7

 Voilà le tableau des résultats (les temps ont été pondérés pour être comparables)

et en image :

Mes conclusions :

• La nouvelle version de Internet Explorer et de Firefox est meilleure que l'ancienne (on pouvait l'esperer...) (Sauf sur lacréation de l'objet image pour IE7, mais c'est peut être mon test qui est à remettre en cause...)
• Opera est plus rapide, c'est plus qu'une idée reçue, c'est vrai... (ou au moins vérifié par Bruno CATTEAU...). Par contre, ils ont encore des progrès à faire au niveau des CSS...
• Firefox n'est pas si rapide que ça par rapport à Internet Explorer, mais dans le chargement de la page, il accèpte d'afficher le début d'un tableau ou d'un div même s'il n'a pas rencontré la balise de fermeture, ce qui augmente l'impression de vitesse, et c'est ça le plus important. Opera a l'air de jouer beaucoup sur ce dernier point, on le voit même dans mon script test_innerHTML.html.
• Au niveau de la gestion des erreurs, Firefox est très loin devant, surtout quand il est associé à l'extention Firebug. C'est certainement pour ça qu'il est tant apprecié des développeurs AJAX (en plus de mieux respecter les standards). Développer une application AJAX avec Internet Explorer c'est comme reparer un magnétoscope dans le noir (désolé, je n'ai pas trouvé mieux...).
• Si vous êtes utilisateur, j'ai envie de vous conseiller Opera.
• Si vous êtes développeur, vous devez déjà utiliser Firefox... et testez vos applis sur le moins bon des navigateurs pour voir si la pire version est acceptable. Eviter d'utiliser innerHTML += dans une boucle doit devenir une habiture...

Pour aider au développement de l'AJAX, plusieurs outils existent en dehors de l'editeur de code. En effet, dans certains cas, le contenu de la page est générée et donc non visible dans la source de la page directement.

Sous Internet Explorer

Internet Explorer Developer toolbar
C'est un executable qui permet d'ajouter une barre d'outils intégrée ou flottante assez complète dans Internet Explorer
Cette barre d'outils se décline en 9 menus
 - View DOM : Permet d'explorer l'arbre DOM du document en lecture et écriture. On peut par exemple changer un style d'un div particulier.
 - Disable : Permet d'activer ou de désactiver le cache, l'affichage des images, les cookies, l'execution des scripts et les popup.
 - View : Permet de mettre en couleur les éléments de la page comportant des classes de style ou des id avec leurs valeurs respectives.
 - Outline : Permet de surligner les éléments TABLE, TR, TD, DIV, IMG ou bien une selection. On peut aussi surligner les éléments par rapport à la nature de leur positionnement (absolute, relative, fixed, float).
 - Validate : Permet de valider le HTML, CSS... via le service du W3C.
 - Images : Permet d'afficher les dimensions, le poids, l'adresse completes et les ATL des images de la  page.
 - Resize : Permer de redimmentionner le navigateur au pixel près.
 - Misc : Permet de vider le cache, les cookies pour le domaine ou tous les cookies. Permet aussi de voir le contenu des cookies et d'afficher les pages de spécification du W3C
 - Show Ruler : Permet d'afficher des règles afin de verifier l'alignement ou de mesurer la distance en pixel entre deux éléments.

C'est une barre complète à laquelle il manque uniquement une meilleure gestion des erreurs javascript, mais là, c'est le navigateur lui même qui est en cause puisque la détection d'erreur sous Internet Explorer est très pauvre.

Sous Firefox

Inspecteur DOM pour Firefox
Cet outils est disponible à l'installation de Firefox et permet d'explorer l'arbre DOM du document en lecture et ecriture. C'est cette même fonctionnalité qui est intégrée dans des extensions pour développeurs.

Extension Firebug 0.4 pour FireFox
Cette extension est relativement récente et commence à faire du bruit. Elle rassemble l'essentiel :
 - Un inspecteur DOM qui permet de parcourir l'arbre DOM généré en lecture et écriture.
 - Une console d'erreur Javascript permettant de remonter les erreurs exactes (le moteur Gecko a une bonne gestion des erreurs javascript) 
 - Un debugger Javascript très avancé permettant même des points d'arrêt pour rentrer dans le détail et optimiser.
 - Une console Javascript permettant d'executer des lignes de commande dans le contexte de la page (c'est très precieux !)
 - Une console de log que l'on peut appeler dans  le code par console.log('toto');

Extension Web developer
Cette extension est l'équivalent de la Internet Explorer Developer Toolbar mais pour Firefox (ou le contraire diront certains). Elle regroupe les mêmes fonctionnalités sans l'inspecteur DOM  (qui est de base dans FireFox  si on le demande à l'installation). Cette barre regroupe les fonctionnalités suivantes :
 - Disable : Permet d'activer ou de désactiver le cache, l'affichage des images, les cookies, l'execution des scripts et les popup.
 - CSS : Permet de desactiver et  de parcourir en lecture et ecriture les styles de la page.
 - Forms : Permet de controler les informations liées aux formulaires.
 - Information : Permet d'afficher les éléments de la page avec leurs proprietés.
 - Images : Permet d'afficher les dimension, le poids, l'adresse completes et les ATL des images de la  page.
 - Misc : Permet de vider le cache, les cookies pour le domaine ou tous les cookies. Permet aussi de voir le contenu des cookies et d'afficher les pages de spécification du W3C
 - Outline : Permet de surligner les éléments TABLE, TR, TD, DIV, IMG ou bien une selection. On peut aussi surligner les éléments par rapport à la nature de leur positionnement (absolute, relative, fixed, float).
 - Resize : Permer de redimmentionner le navigateur au pixel près.
 - Tools : Permet de valider le HTML, CSS... via le service du W3C.
 - View source : Permet d'afficher les sources de la page ainsi que les sources générées.
 - Options : permet de personnaliser la barre d'outils.

Extension Tamper Data pour Firefox
Cette extension permet de voir et de modifier les transferts entre le navigateur et le serveur. On a la possibilité de se "faire passer pour"... Cette extension est precieuse pour l'optimisation d'un code ou d'une configuration. Il permet de mettre en evidence si une librairie javascript ou une image est mise en cache sur le client, le temps necessaire pour récupérer chacun des fichiers et les erreurs éventuelles (une image non trouvée : 404...).

Extensions en doublon :
Je ne parlerai pas  de l'extension Wenkman ni du shell car leurs fonctionnalités respectives sont reprises dans firebug plus simplement.

Autres extensions utiles :
Extension FoxyProxy pour Firefox
Cette extension permet de gerer un ensemble de proxy via des patterns. Si vous êtes nomade ou si vous voulez voir les series américaines en vous faisant passer par un américain, voilà la solution...