web-dev-qa-db-fra.com

Quel est le meilleur moyen de charger Javascript dans une page pour optimiser les performances?

Existe-t-il un moyen de charger mon code JavaScript dans une page qui le rendra plus rapide?

javascriptoptimizationperformance
14
Jason

Il y a quelques choses que vous pouvez faire:

  1. Chargez le HTML et CSS avant le javascript. Cela donne au navigateur tout ce dont il a besoin pour disposer la page et la restituer. Cela donne à l'utilisateur l'impression que la page est accrochée. Placez les balises de script ou les blocs aussi proches que possible de la balise body de fermeture.

  2. Pensez à utiliser un CDN. Si vous utilisez l'une des bibliothèques populaires telles que JQuery, de nombreuses sociétés (par exemple, Google, Yahoo) exploitent des CDN gratuits que vous pouvez utiliser pour charger les bibliothèques.

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

  4. Activez la compression Zip sur le serveur Web.

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

14
Gareth Farrington

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

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 ceci juste avant la balise body de fermeture et utilisez AttachScript pour charger chaque fichier js.
Quelques informations supplémentaires ici http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

7
The Disintegrator

Vous voudrez peut-être aussi regarder comment Google charge Google 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 "de bonne pratique":
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

7
Jeff Atwood

Un couple de gens de Google a annoncé un nouveau projet open source à Velocity 201 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 stockée dans le cache de l'utilisateur, plutôt que d'envoyer un nouveau fichier complet 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 sur lesquels vous utilisez une base de code JavaScript volumineuse avec de petites modifications de code fréquentes. Cela s’applique particulièrement bien aux applications telles que Google Maps, qui subit au moins ne version tous les mardis , et une moyenne d’environ 100 nouvelles versions par an. Cela a également beaucoup de sens en général une fois que le stockage local HTML5 se généralise.

En passant, si vous n'avez pas vu Michael Jones de Google parler de changement (dans un contexte géospatial), il vaut la peine de regarder l'ensemble de son discours liminaire à GeoWeb 2009 .

3
JasonBirch

Pour donner une mise à jour à cette question. Je pense que dans le monde moderne, la méthode 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.

La seule différence est que l'événement de chargement sera déclenché un peu plus tôt, mais le chargement des fichiers reste le même. Je souhaite également ajouter que même si le chargement 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 tout 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 n'est ici qu'un objet contenant toutes les URL de tous les fichiers.

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

Configuration normale

Page load with css in the head and javascript at the bottom

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

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

JS non bloquant

Page load with non-blocking javascript

Maintenant, pour aller un peu plus loin, j’ai fait SEULEMENT les fichiers js non bloquants. Ceci avec le script ci-dessus. Je vois tout à coup 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

Page load with everything non-blocking

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:

1
Saif Bechan