Javascript : attention aux chargements

Vous avez surement remarqué depuis l’apparition des sites web 2.0 avec l’apparition d’Ajax, le code Javascript des sites a pris de l’embonpoint. Raison à cela : la multiplication des librairies javascript (prototype, script.aculo.us, dojo et autres librairies).

On se retrouve avec 5 / 6 voire 10 includes javascript au début de la page (sans compter les tags google analytics et autres).

Donc parfois la première page est souvent laborieuse à venir . Après je vous accorde que le navigateur fait son boulot et gère correctement le cache mais le chargement de la première page c’est aussi la première impression de l’internaute.

En fait le probleme est très simple, un navigateur ne parallelise pas le chargement des includes javascript, il les lit dans l’ordre car il interprete le code. On se retrouve donc avec une suite de requetes de chargements / interpretations de fichier javascript.

La solution est simple, vous pouvez développer avec une liste de fichiers javascript mais lors de la mise en production, concatenner tous vos fichiers javascript en 1 seul (plus gros mais unique donc un peu moins rapide à charger mais une seule requete et pas d’attente)

Economisez votre serveur : Triez en Javascript

Avec un peu de javascript, on peut assez facilement dimunuer le nombre de requetes vers le serveur et ainsi le soulager de travail inutil. En effet, il est toujours mieux de faire le travail sur le poste du client que sur le serveur !

Un exemple très simple est « les tris sur les tables HTML« , vous avez un tableau triable avec la possibilité de trier selon plusieurs colonnes. En php, c’est un peu long a mettre en place il faut gérer le « ORDER BY« , les différentes clés… pour la plupart du temps une petite liste.

Bien sûr, quand la requete renvoit 10000 élements c’est plus difficile de faire autrement mais est-ce vraiment le cas ?

Personnelement j’utilise une petite libriairies Javascript sortable, qui permet de rendre une table HTML toute simple en veritable petite tableau Excel.

Voici un exemple sur mon site Wanarun. Vous y verrez aussi une petite surprise pour la gestion des pages…

Ajax / PHP : Trucs et Astuces #1

Le tips le plus important est de trouver le bon framework, personnellement j’utilise principalement Prototype.

Un exemple tout simple pour mettre a jour un div par le contenu d’un page php

/*
fonction qui permet de charger le html renvoyé
par /ajaxdiv/contenu.php?isajax=1
dans le div page_contenu
*/
function litContenu()
{
  //parametre pour la page
  var pars = 'isajax=1';
  //object utilisé pour la mise à jour
  var myAjax = new Ajax.Updater(
    //identifiant du div à mettre à jour
    'page_contenu',
    //url
    '/ajaxdiv/contenu.php',
    {
      parameters: pars,
      method: 'get',
    });
}


Check out our best movie collection. Latest CD, DVD, HQ DVD movie downloads. Buy and download movies instantly.