Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

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

Vous pouvez aussi essayer :

Le logiciel EASY CSS MENU qui permet de créer facilement des menus dynamiques en CSS pur, capable de tourner sans javascript, et qui pourra vous être d’une grande aide.

Le logiciel MENU MAKER qui permer de créer des menus dynamiques professionnels, en CSS, très rapidement, générant du code HTML5 valide par simple glisser/poser !

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • 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…)

    Réponds !

  • 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 🙂

    Réponds !

  • Greg 3 décembre 2009, 21 09

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

    Réponds !

  • Christopher 7 décembre 2009, 18 06

    Brilliant article, thanks for the help

    Réponds !

  • Greg 7 décembre 2009, 21 09

    No problem, glad to have helped !

    Réponds !

  • 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 ?

    Réponds !

  • 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);
    };

    Réponds !

  • 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('');
    

    Réponds !

  • 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( »);

    Réponds !

  • 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 !

    Réponds !

  • 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.

    Réponds !

  • 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.

    Réponds !

  • 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/>.

    Réponds !

  • Bruce 8 mai 2012, 17 05

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

    Réponds !

  • 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

    Réponds !

  • 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");

    Réponds !

  • runraid 15 novembre 2012, 13 01

    Merci Mimie pour cette réponse rapide et efficace 😉

    Réponds !

  • 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

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Greg: “Merci Olivier, j'insère ton astuce dans l'article en te nommant.Août 29, 21:57
  • Olivier: “Pour info il y a mieux que tout cela à mon sans dans Google. Ecrivez "related: + le…Août 29, 16:33
  • Greg: “Ok, on est tous preneurs si quelqu'un a une bonne solution.Août 24, 13:11
  • Greg: “Bonjour Nathalie, Certes mais c'est un peu le lot de tout site aujourd'hui. Les gens n'achètent plus aussi facilement.…Août 24, 13:09
  • KDel: “Apparemment EjectUSB ne fonctionne pas sous windows 10... Ou alors je ne sais pas l'utiliser, mais j'ai fait exactement comme…Août 24, 11:27
  • nathalie: “sur facebook je trouve qu'il a beaucoup de clics mais qui ne rapportent pas grand chose. le ciblage est beaucoup…Août 22, 17:12
Share This