JavaScript en bas/haut de la page Web?
J'utilisais juste le plugin "Yslow" pour Mozilla Firefox, et il m'a dit que je devrais mettre JavaScript au bas. J'ai déjà entendu cela, mais je n'y ai pas trop réfléchi. Y at-il vraiment un avantage à placer JavaScript au bas d’une page Web par rapport au haut?
Cela permettra à la page Web de se charger de manière visible avant d'exécuter JavaScript, ce qui est logique pour des éléments tels que Google Analytics, qui n'ont pas besoin de se produire avant le chargement de la page.
Vous pouvez également vous pencher sur des éléments tels que jQuery, prototype, etc. et les associer au gestionnaire "prêt", qui exécute le code JavaScript après le chargement complet du DOM, qui constitue un emplacement approprié pour beaucoup de code JavaScript.
En supposant que vous n'exécutez pas sur un CDN ou que vous ne serviez pas votre serveur JS à partir d'un sous-domaine ou d'un serveur distinct, il se chargera de manière synchrone et forcera votre contenu HTML à attendre jusqu'à ce qu'il ait téléchargé les fichiers. En plaçant le JS au bas de votre page, avant la balise de fermeture </body>, vous autorisez l'analyse du code HTML avant le chargement du code javascript. Cela donne l'effet de temps de chargement de page plus rapides.
Si vous avez du contenu HTML statique et beaucoup de javascript, le temps de chargement d'une page peut être modifié, car le HTML se chargera en premier, ce qui donnera à l'utilisateur un élément à regarder. Si vous n'avez pas beaucoup de javascript, ou si le contenu de la page existante repose sur le javascript pour être utile, alors ce n'est pas aussi utile dans la pratique.
Je souhaite mettre à jour ce sujet. Google a récemment introduit async snipped http://support.google.com/analytics/bin/answer.py?hl=fr&answer=1008080&rd=1 qui peut être ajouté pour votre site à apporter, par exemple support des statistiques google. Il devrait être placé en bas de la section <head> pour obtenir les meilleures performances. Le fait est que cela augmente le risque que la balise de suivi soit envoyée avant que l'utilisateur quitte la page.
En outre, il doit être situé à cet endroit si vous souhaitez vérifier votre site dans les outils Google pour les webmasters à l'aide de Google Analytics.
En dehors de cela, les mêmes règles s'appliquent toujours - javascript en bas pour un chargement "rapide" de la page. J'ai utilisé des guillemets parce que je ne compte pas la page entièrement chargée jusqu'à la fin de javascript ;-)
Oui, la page chargera le contenu et le restituera avant le chargement et l’exécution de javascript. Par conséquent, la page se chargera plus rapidement.
HAUT
Lorsque vous placez votre JavaScript en haut de la page, le navigateur commence à charger vos fichiers JS avant le balisage, les images et le texte. Et puisque les navigateurs chargent JavaScript de manière synchrone, rien d’autre ne se chargera pendant le chargement de JavaScript. Il y aura donc un laps de temps de quelques secondes pendant lequel l'utilisateur verra une page vierge pendant le chargement de JavaScript.
BAS
D'autre part, si vous placez votre JavaScript au bas de la page, l'utilisateur verra la page se charger en premier, puis le JavaScript se chargera en arrière-plan. Ainsi, si, par exemple, le chargement de votre code CSS & HTML prend 5 secondes et que votre JavaScript prend encore 5 secondes, placer notre code JavaScript en haut de la page donnera à l'utilisateur un temps de chargement «perçu» de 10 secondes en bas donnera un temps de chargement «perçu» de 5 secondes.
Tiré de Demian Labs .
Placer des scripts au bas de l'élément améliore la vitesse d'affichage, car la compilation de scripts ralentit l'affichage.
Il permet à tous les éléments DOM de se charger complètement avant de charger le Javascript qui les adresse. Cette norme fait également partie de Visual Studio.
Oui, y compris le javascript au bas de la page accélère vraiment le chargement de la page. Étant donné que le navigateur exécute les tâches de manière synchrone, le chargement de la page est affecté s'il est placé en haut de la page. S'il est placé au bas de la page, la page aura chargé l'intégralité du balisage lorsque le navigateur commencera à charger le javascript, offrant ainsi une meilleure expérience à l'utilisateur.