Vous cherchez à surfer sur internet de manière anonyme ? Sur Des Geeks et des lettres nous vous conseillons le VPN Hide My Ass (voir ici notre test)

2 façons de mettre en cache le JavaScript, CSS et Image simplement

Intérêt & explication

L’utilisation du cache de votre navigateur optimise le temps de chargement des pages d’un site, pourquoi et comment ?

  • Tout simplement car lorsque vous visitez un site, le navigateur qui est votre intermédiaire avec Internet, enregistre les données multimédia que vous recevez (javascript, feuilles de styles, images, flash, etc.) et effectue une copie de chaque page traitée qu’il place dans des endroits précis de votre disque dur et de votre mémoire centrale. Ces zones sont les fameux caches.
  • Si vous revisitez le même site, les données précédemment stockées seront retrouvées plus rapidement dans ces caches, le navigateur n’aura pas besoin de les télécharger à nouveau : typiquement si vous utilisez les boutons “précédent” et “suivant” de votre navigateur, il recharge les pages depuis le cache.

A quel moment ?

Lorsque votre navigateur a fini complètement de charger la page en cours, que vos feuilles de styles ont été appliquées, que vos scripts javascript ont été exécutés et que vos images ont été chargées, pourquoi ne pas en profiter pour mettre en cache les données de la page suivante afin qu’elle soit plus rapide à s’afficher ?

Cela peut se faire sans gêner l’utilisateur, vous optimiserez ainsi la vitesse de chargement de vos pages et vous maitriserez le cache de votre navigateur :

  1. Pré-chargement sans condition : vous mettez en cache des données que vous savez qu’elles seront utilisées ultérieurement sans que vous sachiez pour autant à quel moment
  2. Pré-chargement anticipé : vous mettez en cache des données juste avant le chargement de la page qui va les utiliser, la mise en cache est alors ciblée et plus intelligente

En pratique

  • Une première façon consiste à utiliser DOM (Document Object Model)

Il est possible de pré-charger nos futures données en les injectant directement dans la balise HEAD de la page après chargement de celle-ci via DOM. Nous allons donc créer à la volée un élément LINK pour les feuilles de style, une élément SCRIPT pour nos scripts javascript et un élément IMAGE pour nos images.

Le désavantage de cette méthode est que les fichiers CSS et JavaScript sont exécutés et donc peuvent impacter la page en cours par mégarde, il faut donc faire attention :

  • Une seconde façon, bien meilleure, consiste à utiliser AJAX (Asynchronous JAvascript Xml)

Ajax quand tu nous tiens … c’est la façon que je préfère, je la trouve élégante et vraiment simple, elle fonctionne sur tous les navigateurs qui supporte l’objet XMLHttpRequest, autant dire à peu près tous.
L’avantage sur la façon ci-dessus est que les fichiers CSS et JavaScript ne sont pas exécutés et donc aucun impact possible sur la page courante. Méthode propre et efficace.

Remarque

Il existe des bibliothèques qui permettent de faire la même chose, plus de la première façon présentée que la seconde, en voici une qui a l’air simple d’utilisation et performante que je n’ai pas testé personnellement : LazyLoad

{ 18 commentaires… J’ajoute le mien }

  • Greg 3 décembre 2009, 20 08

    Article instructif, mais alors quelle est la différence entre “cache” et “cookies” ? (oui je sais je comprends vite quand on m’explique longtemps…)

    Discutez
  • Mimie 3 décembre 2009, 21 09

    Oui c’est vrai que la différence n’est peut-être pas intuitive, pourtant il y en a une, la voici :
    – le cookie est un fichier stocké sur le disque dur par le navigateur permettant d’enregistrer les informations de notre visite sur le site : par exemple nos identifiants afin de ne plus avoir à le saisir, nos préférences d’affichage afin d’afficher 3 colonnes au lieu de 2 par exemple, nos rubriques les plus visités afin de nous envoyer des emails personnalisés, etc. Le cookie a une durée limitée dans le temps.
    – le cache est simplement l’endroit sur le disque dur où les fichiers, qui composent les pages des sites qu’on visite (.js, .html, .css, .swf, etc.), sont stockées afin d’y accéder plus rapidement lors de la prochaine visite pour que l’affichage des pages soient plus rapides
    Ils travaillent ensemble mais dans des rôles différents :-)

    Discutez
  • Greg 3 décembre 2009, 21 09

    ouais, pourquoi faire simple quand on peut faire compliqué ..

    Discutez
  • Christopher 7 décembre 2009, 18 06

    Brilliant article, thanks for the help

    Discutez
  • Greg 7 décembre 2009, 21 09

    No problem, glad to have helped !

    Discutez
  • Aymeric 4 novembre 2011, 5 05

    Bonjour, je trouve cette technique extrêmement intéressante pour un gain de temps certainement non négligeable.
    Je souhaiterai savoir s’il est possible d’adapter cette technique pour précharger des animations flash au format swf par exemple ?

    Discutez
  • Aymeric 4 novembre 2011, 6 06

    Excusez-moi pour le multi post, mais cette technique vous semble-t-elle correct pour mettre en cache une animation flash :

    window.onload = function() {
    setTimeout(function(){
    // Mise en cache fichier SWF
    var flash = new SWFObject();
    flash.open(‘GET’, ‘mon_fichier.swf’);
    flash.send(”);

    }, 1000);
    };

    Discutez
  • Mimie 4 novembre 2011, 14 02

    @Aymeric : et pourquoi pas tout simplement ça, ça ne marche pas ?

    xhr = new XMLHttpRequest();
    xhr.open('GET', 'mon_fichier.swf');
    xhr.send('');
    
    Discutez
  • Aymeric 6 novembre 2011, 18 06

    Merci, je test dès ce soir et je vous tiens au courant.

    Une dernière question… tout ceci est bien dans une balise :

    xhr = new XMLHttpRequest();
    xhr.open(‘GET’, ‘mon_fichier.swf’);
    xhr.send(”);

    Discutez
  • Aymeric 6 novembre 2011, 18 06

    Excusez-moi, le message fut envoyé involontairement…
    Tout ceci est bien dans une balise :

    Merci beaucoup en tout cas !

    Discutez
  • Aymeric 9 novembre 2011, 9 09

    Bonjour, je suis désolé pour tous les posts, je ne me suis pas rendu compte de suite que les balises n’apparaissent pas dans les messages…

    J’ai donc inséré le code entre des balises “scripts” ? Et tout ceci dans la partie “head” de mon html ?
    Je n’ai pas l’impression que ce soit efficace pour le moment, mais je me penche encore sur le sujet.

    Merci beaucoup.

    Discutez
  • Bruce 8 mai 2012, 15 03

    Bonjour,
    Je suis extrêmement intéressé par ce billet/tuto… Seulement, pourriez-vous m’indiquer où placer ces quelques lignes de code (dans le head ?) ?
    Merci vivement par avance.

    Discutez
  • Mimie 8 mai 2012, 16 04

    Bonjour Bruce, ce n’est que du JavaScript, donc tu le mets où tu veux dans une balise <script/>.

    Discutez
    • Bruce 8 mai 2012, 17 05

      Tout simplement. Merci !
      Je pensais qu’il y avait une place stratégique ;-)

      Discutez
  • runraid 15 novembre 2012, 11 11

    merci pour cet article intéressant mais une petite question
    pour la 2ème méthode Ajax, faut-il insérer le chargement préalable d’une bibilothèque Ajax ou simplement insérer les lignes 1 à 1″ du script ?
    merci d’avance pour votre réponse

    Discutez
  • Mimie 15 novembre 2012, 12 12

    @runraid: le code présenté dans le billet n’utilise pas de framework javascript (ajax) en particulier, donc tu peux le copier-coller dans une balise “script” simplement.

    Si tu utilises déjà jQuery par exemple, voici une exemple de ce que tu peux faire :

    $.get("new.js"); $.get("new.css");
    Discutez
  • runraid 15 novembre 2012, 13 01

    Merci Mimie pour cette réponse rapide et efficace ;)

    Discutez
  • Greg 15 novembre 2012, 23 11

    Mimie, je sais pas si tu sais mais tu es cité sur un site américain, cf. http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ – GG

    Discutez

Vos participations


2 × = dix-huit

Article suivant:

Article précédent:

Coup de pouce

Recherche

Découvrez le nouveau concept de Net Dating Assistant : le site de rencontres où vous pouvez engager quelqu'un qui tchat à votre place et vous ramène plein de rendez-vous

net dating assistant

Derniers Commentaires

  • Greg { Ce VPN est dorénavant compatible sous la forme d'applications mobiles. } – 18 déc, 21:11
  • Greg { Ok, j'utiliserai ton site si d'ici là je continue à jouer à Magic (j'ai mes... } – 15 déc, 17:44
  • Greg { Ok. Des idées de jeu ? Lineage 2, perso aucun mmo ne lui arrive à... } – 15 déc, 17:39
  • Mimie { +1 :-) ms2 intégrera cette nouvelle mécanique ^^ } – 15 déc, 15:18
  • Mimie { Je crois que j'en ai fini avec D3 ... marre de recrée les perso à... } – 15 déc, 15:13
  • Ashanti { Le site a rouvert ses portes, venez y faire un tour!! } – 14 déc, 23:31
  • magestionvehicule { Bonjour, sans passer par un logiciel tierce, vous avez aussi le moyen de récupérer le... } – 13 déc, 12:54
  • Steph { Une nouvelle version que j'aime bien aussi même si elle n'a sans doute pas profondeur... } – 03 déc, 22:01
  • Greg { Roooxx ! Idée cadeau Noël, tiens, ce coffret intégrale de Mai-Hime, pour ceux qui cherchent... } – 01 déc, 23:44