Quelle est la meilleure façon de charger Javascript dans une page pour optimiser les performances?

Existe-t-il un moyen de charger mon JavaScript dans une page qui accélérera le chargement?

Il y a quelques choses que vous pouvez faire:

1. Chargez le HTML et le CSS avant le javascript. Cela donne au navigateur tout ce dont il a besoin pour disposer la page et la rendre. Cela donne à l'utilisateur l'impression que la page est accrocheuse. Placez les balises ou blocs de script aussi près que possible de la balise de fermeture.

2. Pensez à utiliser un CDN. Si vous utilisez l'une des bibliothèques populaires comme JQuery, de nombreuses entreprises (par exemple, google, yahoo) exploitent des CDN gratuits que vous pouvez utiliser pour charger les bibliothèques.

3. Chargez le code sur un fichier externe au lieu d'un script incorporé. Cela donne au navigateur la possibilité de mettre en cache le contenu JS et de ne pas avoir à le charger du tout. Les chargements de page successifs seront plus rapides.

4. Activez la compression zip sur le serveur Web.

Yahoo a une grande page de suggestions qui peuvent aider à réduire les temps de chargement des pages.

Outre Minifing, gziping et CDNing (nouveau mot?). Vous devriez envisager de différer le chargement. Fondamentalement, cela ajoute des scripts de manière dynamique et empêche le blocage, permettant des téléchargements parallèles.

Il y a plusieurs façons de le faire, c'est celle que je préfère

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

Placez-le juste avant la balise de fermeture et utilisez AttachScript pour charger chaque fichier js.
Plus d'informations ici http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Vous pouvez également examiner la façon dont Google charge Analytics:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Comme il est considéré comme une sorte de script «conforme aux meilleures pratiques»:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Un couple de Google a annoncé un nouveau projet open source à Velocity 2010 appelé Diffable . Diffable effectue un peu de magie pour publier de manière incrémentielle uniquement les parties de JS, HTML et CSS qui ont changé depuis la version qui est stockée dans le cache de l'utilisateur, plutôt que d'envoyer un nouveau fichier entier lorsqu'une nouvelle version est publiée.

Cette technique est incroyablement cool et est actuellement la plus efficace (et en vaut la peine) sur les sites Web où vous utilisez une grande base de code JavaScript avec de petits changements de code fréquents. Cela s'applique particulièrement bien à des applications comme Google Maps, qui subit au moins une version tous les mardis , et en moyenne environ 100 nouvelles versions par an. Cela a également beaucoup de sens en général une fois que le stockage local HTML5 devient plus répandu.

BTW, si vous n'avez pas vu Michael Jones de Google parler de changement (dans un contexte géospatial), cela vaut la peine de regarder l'intégralité de son discours à GeoWeb 2009 .

Pour donner une mise à jour à cette question. Je pense que dans le monde moderne, le mode de chargement non bloquant n'est plus nécessaire, le navigateur le fera pour vous.

J'ai ajouté une question à StackOverflow, je vais ajouter le contenu ici aswel.

La seule différence est que l'événement de chargement sera déclenché un peu plus tôt, mais le chargement des fichiers eux-mêmes reste le même. Je veux également ajouter que même si l'onload se déclenche même plus tôt avec le script non bloquant, cela ne signifie pas que les fichiers JS sont déclenchés plus tôt. Dans mon cas, la configuration normale est la meilleure

Maintenant, d'abord les scripts, ils ressemblent à ceci:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles est ici juste un objet qui contient toutes les URL de tous les fichiers.

J'ai effectué 3 tests, voici les résultats:

Configuration normale

Ceci est juste la configuration normale, nous avons 4 fichiers css dans la tête et 3 fichiers css en bas de la page.

Maintenant, je ne vois rien de bloquant. Ce que je vois c'est que tout se charge en même temps.

JS non bloquant

Maintenant, pour aller un peu plus loin, j'ai fait SEULEMENT les fichiers js non bloquants. Ceci avec le script ci-dessus. Je vois soudainement que mes fichiers CSS bloquent la charge. C'est étrange, car cela ne bloque rien dans le premier exemple. Pourquoi CSS bloque-t-il soudainement la charge?

Tout non bloquant

Enfin, j'ai fait un test où tous les fichiers externes sont chargés de manière non bloquante. Maintenant, je ne vois aucune différence avec notre première méthode. Ils se ressemblent tous les deux.

Conclusion

Ma conclusion est que les fichiers sont déjà chargés de manière non bloquante, je ne vois pas la nécessité d'ajouter un script spécial.

Ou est-ce que je manque quelque chose ici?

Plus:

• Article: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• Question: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
• Question: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
• Code: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• Code: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/