Quand choisissez-vous de charger votre javascript au bas de la page au lieu du haut?

Haut : Lorsque les événements JavaScript fonctionnent sur les éléments immédiatement sont plus importants (alors, si vous utilisez un événement DOM Ready pour tout charger, c'est le mauvais endroit)

En bas : lors du chargement du contenu est plus important

Yahoo dit de mettre des scripts au fond . Google dit quelque chose de similaire, mais pas aussi clairement.

La raison pour laquelle vous l'avez au bas de la page est parce que si vous le placez en haut de votre page, le rendu de votre page attendra ces fichiers avant de le rendre. C'est pourquoi beaucoup de personnes mettent JavaScript au bas de la page car elles permettent de rendre la page entière alors que le JavaScript est chargé.

Il y a très rarement une raison pour laquelle vous souhaitez mettre le JavaScript en haut de la page, et à moins que vous ayez une raison explicite pour laquelle le JavaScript est chargé avant la page principale, placez-le en bas. La plupart des guides d'optimisation suggèrent de le mettre au bas pour cette raison.

Je place tous les CSS dans la TÊTE pour éviter les peintures d'écran excessives et les flashes de style.

Je place la plupart des demandes de fichiers JavaScript au bas de la page afin que la page puisse être rendue rapidement (le chargement HTML / CSS bloquera jusqu'à ce que les balises de script ci-dessus aient été chargées et traitées). Tout code qui doit être exécuté après la chargement des fichiers de la bibliothèque est exécuté surDOMReady, qui est tout un code à l'exception de l'initialisation de la bibliothèque. J'ai tout à l'heure suivi les recommandations GoogleSpeed .

J'ai pensé à utiliser LABjs aussi bien pour diminuer davantage les temps de chargement de la page, mais cela fonctionne bien en ce moment.

En raison du fait que les navigateurs doivent suspendre l'affichage du contenu d'une page lors de l'analyse d'un fichier Javascript, la recommandation est de charger le Javascript au bas de la page pour accélérer l'affichage du contenu d'une page. Cela fonctionne mieux si votre site Web peut être rendu sans que Javascript soit exécuté pour modifier la page, car la page sera disponible pour l'interaction de l'utilisateur, même si un script se bloque plus longtemps que prévu.

Lorsque le navigateur rencontre un élément de script , il doit évaluer le JavaScript contenu dans cet élément car le script peut modifier le contenu de la page (via document.write ) ou inspecter l'état actuel de la page.

Si l'élément de script charge le script à l'aide de l'attribut src , le chargement d'autres ressources (JavaScript, CSS, images, etc.) sera bloqué jusqu'à ce que le script actuel soit chargé.

Ces deux facteurs peuvent ralentir le temps de chargement perçu de votre page.

Si votre JavaScript ne modifie pas la page ou s'il n'a pas besoin d'inspecter l'état de la page jusqu'à ce qu'il soit chargé, vous pouvez marquer votre élément de script avec defer="defer" (pris en charge par IE 6+ et Firefox 3.5+) Indique que l'évaluation du script peut se produire "plus tard". Le déplacement de vos éléments de script vers le bas de la page fait effectivement la même chose: puisque vos scripts apparaissent à la fin du document, ils seront évalués après la chargement de CSS, des images, etc., et le HTML est rendu.

J'ai mis tous les scripts externes (tels que les analyses Google) en bas, de sorte que leur retard n'affecte pas le chargement du DOM.

Autrement dit, si votre script comporte des extraits qui commencent à s'exécuter tout de suite (en dehors de tous les corps de la function(){} ) et qui accèdent aux éléments DOM, il devrait aller à la fin de la page afin que DOM ait été construit et être prêt à Être accessible à partir du moment où le script commence à s'exécuter.

Si vous accédez à DOM uniquement à partir d'appels de fonction (comme onload , onclick etc.), vous pouvez mettre le script en toute sécurité dans la section de tête elle-même.

J'ai mis un petit script dans la tête qui fait tout ce que je veux faire avant que le reste de la page ne soit généré, et charge tous les autres scripts requis en charge ou, au besoin, après le chargement du document.