Skip to content

4- Code client

  1. Utiliser Ajax pour les zones de contenu souvent mises à jour
    • Identifier les zones qui nécessitent d'être rafraîchies régulièrement
    • Les charger à la volée en Ajax
  2. Eviter les animations Javascript/CSS coûteuses
    • Elles déclenchent des repaint et reflow coûteux en CPU
    • Si besoin, préférer CSS opacity, transform et les fonctions translate, rotate, transform.
  3. N'utiliser que les fonctions indispensable des bibliothèques Javascript et CSS
    • Les bibliothèques frontend classiques (BS, JQuery, etc.) embarquent trop de fonctionnalités
    • Les éviter : http://youmightnotneedjquery.com/
    • Prendre les sources et limiter aux fonctions/éléments essentiels
  4. Ne pas modifier le DOM lorsqu'on le traverse
  5. Rendre les éléments du DOM invisibles lors de leur modification
    • display: none, modifier, puis à nouveau display: initial;
  6. Réduire au maximum le repaint (appearance) et le reflow (layout)
  7. Utiliser la délégation d'évènements
  8. Modifier plusieurs propriétés CSS en une seule fois
  9. Valider le code Javascript avec JSLint
  10. Eviter d'utiliser try ... catch ... finally
    • Remplacer par un test logique, c'est moins gourmand en mémoire
  11. Utiliser les opérations primitives
    • L'emploi de méthode fait appel à un objet puis à sa méthode ce qui est plus lourd qu'une opération directement gérée par le langage
  12. Mettre en cache les objets souvent accédés en Javascript
    • Plutôt que d'appeler plusieurs fois un élément du DOM, il vaut mieux le stocker dans une variable.
  13. Privilégier les variables locales
    • L'utilisation de variables globales fait appel à des recherches inefficaces
  14. Privilégier les fonctions anonymes
    • Si la fonction n'est utilisée qu'une fois, pas besoin de la nommer.
  15. Préférer les fonctions aux strings en argument à setTimeout() et setInterval()
  16. Eviter les boucles for ... in
    • Utiliser plutôt for (var i=0; i<machin.length; i++) { ... }
  17. Réduire les accès au DOM via Javascript
  18. Privilégier les changements visuels instantanés
    • Remplacer les fadeIn() fadeOut() par show et hide