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 :
- 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
- 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 :
window.onload = function() {
setTimeout(function(){
// reference to <head>
var head = document.getElementsByTagName('head')[0];
// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "new.js";
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "new.png";
}, 1000);
};- 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.
window.onload = function() {
setTimeout(function(){
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'new.css');
xhr.send('');
// preload image
new Image().src = "new.png";
}, 1000);
};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
Cet article a été écrit par :
Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.
Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !
Affichez votre portrait
{ 11 commentaires… à vous de vous exprimer ! }
Article instructif, mais alors quelle est la différence entre « cache » et « cookies » ? (oui je sais je comprends vite quand on m’explique longtemps…)
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
ouais, pourquoi faire simple quand on peut faire compliqué ..
Brilliant article, thanks for the help
No problem, glad to have helped !
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 ?
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);
};
@Aymeric : et pourquoi pas tout simplement ça, ça ne marche pas ?
xhr = new XMLHttpRequest(); xhr.open('GET', 'mon_fichier.swf'); xhr.send('');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( »);
Excusez-moi, le message fut envoyé involontairement…
Tout ceci est bien dans une balise :
Merci beaucoup en tout cas !
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.