Samir AMZANI's BLOG

Malgré toute la beauté d'une application ajaxienne, on s'aperçoit  d'une grande quantité de Javascript est demandée, ce qui rend cette application trop lourde au début de chargement de la  première page.       
Parmi les solutions qui permettent de palier à ce  problème est la compression ou l'optimisation de code javascript, mais cela ne fonctionne pas dans certaines conditions, et la plupard des fonctions perdent leurs contextes d'exécution.
Pourquoi charger tout les Javascript alors qu'un minimum  serait suffisant pour assurer l'affichage de site.

Le javascript On-Demand consiste à charger le codeJavascript à la demande de client.

Exemple pratique :

J'ai une page ou il y'a un formulaire de saisie, et je voudrais faire des contrôles client-side avant  de transmettre ses données au serveur Web :

Solution 1 : ajouter le Javascript dans le nœud head

L'astuce ce cette solution consiste à  télécharger le code Javascript qui contôle les champs de formulaire vers la fin de la saisie. 

function telecharger_js(){
        if (self.validate_form) { //est ce quele javascript est déja chargé?
                return;
        }
        var head =document.getElementsByTagName("head")[0];
        script =document.createElement("script");
        script.id = "form_script";
        script.type ="text/javascript";
        script.src ="form_functions.js";
        head.appendChild(script);
    } 

<formid='id_frm' method='post' action='validate.php'>

<labelfor="name">name</label>

<inputtype="text" name="name" id="name" /><br> 

…………………
<labelfor="age">name</label>

<inputtype="text" name="age" id="age" onfocus="telecharger_js()"/><br>

<inputtype="button" id='btn_valider" value="valider" />

</form>

Solution 2 : une variante de la  première solution qui permet de chargé le code javascript depuis le serveur  avec Ajax et l'exécuté avec la function eval()