Articles avec le tag ‘style’

Améliorer le code javascript

Jeudi 9 juillet 2009

Malgré le rappel de Douglas Crockford sur le fait que le code javascript lui-même représente au mieux 15% des performances de la page, il est parfois utile d’y jeter un oeil.

Nicholas Zakas, de Yahoo!, propose un bon aperçu pour ceux que ça intéresse dans sa présentation « Writing Efficient javascript»  aux conférences Velocity 2009.

Variables locales

Vous y trouverez un rappel sur l’influence de la chaîne de résolution des variables javascript avec un raccourci très significatif : local variable = fast. Le graphique à l’écran 26 est parfait pour expliquer tout ça :

Influence de la portée des variables en javascript
(Lire la suite…)

Vidéo de la phase de rendu du navigateur

Mardi 3 février 2009

Que fait le navigateur pendant le rendu ? pourquoi est-ce si long ?

La question est complexe à répondre pour qui n’a pas touché au moteur d’un navigateur. Pour vous donner un premier aperçu, vous avez toutefois trois vidéo (faites par Satoshi Ueyamai pour une présentation au Japon). Elles vous montrent les différentes étapes de rendu du moteur Gecko pour les sites Mozilla.org, Wikipedia.org, et Google.jp. Plus exactement on visualise le reflow, c’est à dire l’événement interne qui indique qu’il faut recalculer les tailles et positionnement (si je ne m’abuse, c’est un domaine que je ne connais pas bien et toute précision est la bienvenue). je ne sais pas bien comment exploiter, mais au moins ça permet de constater.

Ces vidéos ont été obtenues en modifiant le code de Mozilla. Daniel Glazman nous avait dit aux dernières conférences Paris Web qu’il était désormais possible de réaliser cela via une extension depuis les dernières versions de Mozilla. Si quelqu’un souhaite se lancer…

En attendant Matthew Buchanan vous propose une extension pour voir le rendu progressif au fur et à mesure que la feuille de style est interprétée.

À mettre aussi en rapport avec l’intervention de David Baron dont je parlais en novembre.

Performance des sélecteurs CSS, encore un mot

Vendredi 17 octobre 2008

On reparle des performances CSS. Souvenez-vous, je vous avais parlé d’un document de Mozilla faisant état des sélecteurs plus ou moins performants. S’était ensuivi une discussion à propos de la pertinence de tels sujets vu la différence de performance mise en oeuvre.

Je vous invite à relire ce second billet, qui résume assez bien. Si on remet le couvert c’est que Jon Sykes a refait un troisième test tout récemment, avec un graphique assez sympa

(Lire la suite…)

Styles avec et sans Javascript

Vendredi 8 août 2008

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. (Lire la suite…)

Gains de performance des sélecteurs CSS

Lundi 12 mai 2008

Je parlais il y a quelques jours de performance des sélecteurs CSS. Il y a eu quelques réactions et j’ai échoué dans mes explications : les différences de performance dont on parle ici sont probablement négligeables la plupart du temps. Hors commentaires, certains m’ont rappelé que la documentation de Mozilla concerne d’ailleurs au départ les interfaces XUL avec de gros documents XML complexes agrémentés de très grosses feuilles de style.

Quelle importance ?

Il n’y a pas lieu de refaire vos CSS ou de commencer à mettre en place des solutions qui handicapent la maintenance du site (par exemple ne plus utiliser aucun sélecteur descendant). Il y a toutefois parfois utilité. Sur de grosses pages spéciales ou simplement sur les gros sites, ça peut avoir une influence. (Lire la suite…)