Depuis quelques mois, je m'intéresse vraiment au Javascript et j'essaye de faire le plus de choses avec, qui sont normalement faits côté serveur. Je reste quand même raisonnable et prend l'efficacité en compte, mais j'ai pu tester des choses intéressantes. Ici, je vais vous parler du cache Javascript.
Le principe du cache
Le cache dans un cadre général consiste à stocker des informations, des requêtes, pour pouvoir les réutiliser plus rapidement par la suite. Par exemple, lorsqu'une page est générée à partir de contenus dynamiques, on peut la stocker pour la ressortir sans requêtes, tant que cette page n'est pas modifiée. Cela est très utile pour les sites peu mis à jour ou les sites à fort trafic, ce qui allégera considérablement le serveur.
Je suis parti du même principe, mais pour ne faire (presque) plus aucune requête vers le serveur lorsque le site est chargé. Pour cela, je crée un fichier javascript contenant un tableau JSON avec toutes les informations dont j'aurais besoin. Je ne fais alors que des appels à ce tableau en Javascript. Il n'y a donc aucune requête Ajax ou autre pour demander des informations au serveur, à part pour les images.
Pourquoi un cache Javascript ?
L'utilité peut être plus ou moins grande selon les besoins. Le principe étant de stocker toutes les données, ou du moins une grande partie, un site comme Amazon par exemple n'en aurait aucune utilité. Par contre, pour des applications web, ou des blogs comme le mien, cela peut être très intéressant ! Ca l'est encore plus avec l'utilisation du mode offline de Javascript et du local storage !
Comment créer ce cache Javascript ?
Je vais prendre un exemple sur Wordpress, CMS sur lequel ce cache est très simple à mettre en place et où il peut avoir une réelle utilité !
Parce qu'on ne peut pas (encore) tout faire en Javascript, il faut partir du PHP, et procéder comme pour faire un cache PHP. On va ainsi utiliser les fonctions "ob_start" et "ob_end_clean". Ces fonctions servent à faire des traitements sans que ce ne soit visible chez le navigateur. Ainsi, vous pouvez faire un "echo" de n'importe quoi, cela ne s'affichera pas.
ob_start();
ob_clean_end();
On va donc mettre nos requêtes pour créer notre tableau JSON entre ces deux fonctions. Pour éviter que ces requêtes soient faites à chaque visite (sinon ça n'a plus aucune utilité), on va temporiser ce cache, pour que ce ne soit fait qu'une fois par jour par exemple.
ob_start();
$cacheFile = "URL_DE_VOTRE_FICHIER.js"
if(file_exists($cacheFile) && filemtime($cacheFile) < $expire)
{
// Création du cache
}
ob_clean_end();
C'est à ce moment qu'on crée le tableau PHP dans un premier temps, qu'on convertira en JSON ensuite. On va ainsi y mettre le title et le content de nos articles par exemple.
ob_start();
$cacheFile = "URL_DE_VOTRE_FICHIER.js"
if(file_exists($cacheFile) && filemtime($cacheFile) < $expire)
{
query_posts( 'posts_per_page=1000&post_status=publish&cat=-19,-20' );
$i = 0;
if(have_posts()) : while(have_posts()) : the_post();{
$cache[$i]['id'] = $post->ID; // Ajout de l'ID
$cache[$i]['title'] = $post->post_title; // Ajout du titre
$cache[$i]['content'] = $post->post_content; // Ajout du content
$i++;
} endwhile;
endif;
$json_cache = 'var articlesNb = '.($i+1).'; var cacheA = '.json_encode($cache).'; // On crée le contenu de notre fichier javascript
wp_reset_query(); // On réinitialise les requêtes Wordpress pour la suite
}
ob_clean_end();
Pour finir, il faut ouvrir le fichier de cache, écrire dedans, puis le refermer.
ob_start();
$cacheFile = "URL_DE_VOTRE_FICHIER.js"
if(file_exists($cacheFile) && filemtime($cacheFile) < $expire)
{
query_posts( 'posts_per_page=1000&post_status=publish&cat=-19,-20' );
$i = 0;
if(have_posts()) : while(have_posts()) : the_post();{
$cache[$i]['id'] = $post->ID; // Ajout de l'ID
$cache[$i]['title'] = $post->post_title; // Ajout du titre
$cache[$i]['content'] = $post->post_content; // Ajout du content
$i++;
} endwhile;
endif;
$json_cache = 'var articlesNb = '.($i+1).'; var cacheA = '.json_encode($cache).'; // On crée le contenu de notre fichier javascript
wp_reset_query(); // On réinitialise les requêtes Wordpress pour la suite
$file = fopen($cacheFile,"w"); // On ouvre le fichier de cache en mode écriture
fwrite($file, $json_cache); // On écrit notre contenu dedans
fclose($file); // On le ferme !
}
ob_clean_end();
Il ne reste maintenant plus qu'à l'inclure dans votre "head" comme un fichier Javascript normal.
