Performance web » body http://performance.survol.fr Quelques mots pour des sites web rapides Fri, 18 Jun 2010 12:47:47 +0000 en hourly 1 http://wordpress.org/?v=3.0 Styles avec et sans Javascript http://performance.survol.fr/2008/08/styles-avec-et-sans-javascript/ http://performance.survol.fr/2008/08/styles-avec-et-sans-javascript/#comments Fri, 08 Aug 2008 10:00:52 +0000 Éric http://performance.survol.fr/?p=105 Continuer la lecture →]]> Charger le javascript le plus tard possible, ou au moins de manière asynchrone, implique que le visiteur risque de voir la page avant l’exécution du dit javascript. Si le javascript enrichit ou modifie la page, le visiteur aura la désagréable surprise de voir la page se modifier sous ses yeux.

Dans un des premiers billets je vous proposais d’ajouter une classe js à la balise <body>. L’idée est de différencier dès le début du rendu si la page est destinée à un affichage avec ou sans javascript.

Ajouter une classe au <body>

Pour l’exemple je vous proposais le code suivant juste après l’ouverture de <body> :

<script type="application/javascript">
document.body.className = "js " + document.body.className ;
</script>

J’ai un problème avec ça. On m’a fait la remarque que parfois les noeuds DOM souhaités ne sont pas disponibles quand le javascript s’exécute. Le fait que la balise d’ouverture soit déjà passée n’offrirait pas de garantie à ce niveau. J’ai quand même un doute pour le document.body. Personnellement je ne l’ai pas encore vue en défaut.

Amis lecteurs, êtes-vous capables de me trouver un contre-exemple où le document.body n’est pas disponible et utilisable dès l’ouverture la balise correspondante ? Vous avez le droit à n’importe quel navigateur grade A pour vos tests, et de monter tous les scénarios tordus que vous voulez. Même un résultat aléatoire me convient. L’idée c’est de prouver que cela peut arriver, et éventuellement de cerner les situations où c’est le cas.

Ou sur le <html>

Le cas échéant il y a une seconde technique, qui est d’utiliser document.documentElement, qui logiquement fait référence au noeud <html>. Là on a la certitude de pouvoir y accéder en javascript. Les navigateurs acceptent tous de jouer avec document.documentElement.className donc cela pourrait être une solution. Le second avantage c’est que je peux lancer ma ligne de script dès le début du <head>, je n’ai plus besoin d’attendre le corps de la page pour cela.

<script type="application/javascript">
document.documentElement.className = "js " + document.documentElement.className ;
</script>

Le défaut que je vois est théorique ce coup ci. Les spécifications DOM HTML indiquent bien la présence d’un attribut className pour <html>. Cet attribut javascript sert à accéder et modifier l’attribut class de la balise. Or là il y a une incohérence puisque dans les spécifications HTML 4 et XHTML 1, la balise <html> n’a pas d’attribut class. Mon javascript est fonctionnel et respecte ses propres spécifications, mais je lui fais faire quelque chose que je sais aller à l’encontre des recommandations du format HTML.

En pratique cette seconde technique fonctionne et nos navigateurs laxistes acceptent tous de mettre des classes à <html>, que ce soit statiquement dans le code HTML ou dynamiquement via javascript. Maintenant si je pouvais éviter cela serait quand même mieux. À défaut j’attendrais HTML 5, où l’attribut class est explicitement autorisé sur <html>.

Sur ce qui doit être recommandé

Ces deux techniques ont un gros potentiel, mais j’attend votre aide pour savoir lequel je dois conseiller. Si je n’ai pas de contre-exemple pour la première solution, alors restons avec. Sinon l’utilisation de document.documentElement peut être un bon compromis.

]]> http://performance.survol.fr/2008/08/styles-avec-et-sans-javascript/feed/ 6