éco-conception web : mettre en cache les objets souvent accédés en JavaScript

Par Frédéric Bordage  -  09/01/2013

 
ImprimerImprimer

Livre - éco-conception web : les 100 bonnes pratiques - Eyrolles - couverture - small

Dans le cadre du lancement du livre Eco-conception web - Les 100 bonnes pratiques auquel plusieurs contributeurs de GreenIT.fr ont participé, nous vous proposons toutes les deux semaines un focus sur une bonne pratique présentée dans le livre.

Aujourd’hui : mettre en cache les objets souvent accédés en JavaScript

L’accès au DOM est coûteux en termes de ressources processeur (cycles CPU). Aussi, lorsque vous utilisez plusieurs fois le même élément du DOM depuis JavaScript, stockez sa référence dans une variable afin de ne pas parcourir à nouveau le DOM pour ce même élément.

Par exemple, ne pas écrire :
document.getElementById(‘menu’).property1 = ‘foo’;
document.getElementById(‘menu’).property2 = ‘bar’;

mais plutôt :
var menu = document.getElementById(‘menu’);
menu.property1 = ‘foo’;
menu.property2 = ‘bar’;

Cette bonne pratique a un impact sur la performance de l’application et donc sur :
- la quantité d’énergie nécessaire à son fonctionnement (émissions de gaz à effet de serre),
- la configuration minimale requise pour y accéder (fracture numérique, obsolescence programmée).

Découvrir le livre Eco-conception web - Les 100 bonnes pratiques
L’acheter chez amazon.fr, eyrolles.com, à la Fnac.com.

Partager sur Viadeo


Tags: ,

Commentaires

A la base y a pas de $ en javascript sauf si un framework est utilisé, (au passage prototype/mootools serait déconseillé pour l’optimisation CPU) donc ça donnerait :
var menu = document.getElementById(‘menu’);

Je pense que de toute façon les moeteurs d’exécution javascript sont assez malins pour optimiser le code et n’accéder au DOM qu’une fois … mais c’est à vérifier.

tranche (non vérifié) le 09/01/2013

@tranche : effectivement, erreur d’inattention. C’est corrigé. Merci pour l’alerte.

admin le 09/01/2013

@Tranche : ” moteurs d’exécution javascript sont assez malins” : je ne mettrais pas ma main à couper sur cette affirmation ! Tout dépend de l’implémentation, du code… Le développeur est plus lent que la machine mais plus intelligent qu’elle ;-)

Olivier Philippot le 10/01/2013

@tranche : dans l’exemple donné, le DOM est bien parsé 2 fois.
L’astuce donnée est une question de bon sens en performances dans le développement côté client.
On peut citer aussi l’astuce très répandue de stocker un objet dans une variable pour éviter sa reconstruction lorsqu’on utilise un framework.
Exemple jQuery :
function mafonction(){
jQuery(this).hide();
jQuery(this).show();
}
devient :
function mafonction(){
var monnode = jQuery(this);
monnode.hide();
monnode.show();
}
ou encore mieux, puisque jQuery est chainable :
function mafonction(){
jQuery(this).hide().show();
 }

melicerte (non vérifié) le 10/01/2013

Poster un nouveau commentaire

Le contenu de ce champ ne sera pas montré publiquement.