Histoire du javascript différé

Pour dispatcher un peu mon précédent post sur la compression d'images(résolu ou presque , vive fireworks et....photoshop), google speed me balance parfois que mon javascript n'est pas différé, j'ai donc utilisé ce qu'on appelle un lasy loading qui consiste a générer dynamiquement les scripts externes bien sur après le chargement complet de la page grâce aux listeners.

Seulement, j'ai constaté que mon rank speed bougeait à peine....

Donc est ce vraiment utile de passer par la ou mieux vaut faire ça comme vous dites tous si bien : béner ses javascripts en fin de page avant la balise body ????



Encore une fois google veut nous imposer sa suprématie en inventant cet outil .

D'un autre coté, l'optimisation des pages web, c'est aussi notre taf !

Hello.

Tu parles bien de ce code?

function includeJS(src){
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', src);
    document.getElementsByTagName('head')[0].appendChild(script);
}/*** Une fois la page chargée...*/

(window.addEventListener || window.attachEvent)
(window.addEventListener ? 'load' : 'onload',function() {
//on lance la fonction avec ses scripts js
    includeJS('http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
    includeJS('web/js/cloud-carousel.1.0.5.min.js');
    includeJS('web/js/jquery.mousewheel.min.js');
    includeJS('web/js/cloud-carousel.1.0.5.min.js');
    includeJS('web/fancybox/jquery.fancybox-1.3.4.pack.js');
 },true);

Son but est d’accélérer le startRender car le JS est bloquant. Le gain se fait réellement sentir sur de grosses webapp ; sur un site classique, selon la quantité de JS c'est moins le cas.

Plus d'infos sur les scripts non bloquants (en anglais)

En l’occurrence, la fonction donnée en exemple par Google dans Defer loading of JavaScript est très simplifiée par rapport à ce qui se fait réellement en terme de loader asynchrone du genre RequireJS, principalement la gestion de modules AMD et de leurs dépendances.

Et pour répondre à ta question initiale, rien ne t'empêche de combiner les deux approches : minification/obfuscation + concaténation dans un seul gros fichier chargé de façon asynchrone.

Quelques pistes au passage si l'optimisation JS t'intéresse :
- Lancer juste le JS nécessaire au DOM ready, et différer celui moins important au DOM Load.
- Utiliser la délégation d'évènement un maximum.
- Voir du côté des attributs defer et async de la balise scripts.
- Les outils d'optimisations comme Sprockets, Juicer ou Google Closure Compiler sont intéressants à conditions de maitriser ce qu'on fait.

phpCbien a écrit :
Encore une fois google veut nous imposer sa suprématie en inventant cet outil .

On t'a braqué un flingue sur la tempe pour te forcer à l'utiliser?
Modifié par Florian_R (01 Dec 2011 - 12:33)

a écrit :
On t'a braqué un flingue sur la tempe pour te forcer à l'utiliser?

vi !