92 votes

$ (document) .ready (fonction () {}); vs script en bas de page

Quelle est la différence / l'avantage / le désavantage d'écrire un script en bas de page et d'écrire le script en

 $(document).ready(function(){});
 

142voto

T.J. Crowder Points 285826

Très peu de dans et de lui-même, de toute façon le DOM sera prêt pour vous d'opérer (j'étais nerveux à ce sujet jusqu'à ce que j'ai lu ce à partir de Google). Si vous utilisez la fin de la page astuce, votre code peut être appelé le moindre, le moindre peu plus tôt, mais rien de ce qui sera la matière. Mais plus important encore, ce choix a trait à l'endroit où vous le lien de votre code JavaScript dans la page.

Si vous incluez votre script balise dans l' head et s'appuyer sur ready, le navigateur détecte votre script balise avant qu'il affiche quelque chose à l'utilisateur. Dans le cours normal des événements, le navigateur est un coup d'arrêt brutal et va et télécharge le script, les feux de l'interpréteur JavaScript, et les mains le script, puis attend que l'interprète processus de l'écriture (et jQuery montres de différentes manières, pour le DOM soit prêt). (Je dis "dans le cours normal des choses", car certains navigateurs prennent en charge l' async ou defer attributs script balises.)

Si vous incluez votre script balise à la fin de l' body élément, le navigateur ne prend pas en faire tout cela jusqu'à ce que votre page est en grande partie déjà affiché à l'utilisateur. Cela améliore la perception du temps de chargement de votre page.

Donc, pour obtenir la meilleure perception du temps de chargement, de mettre votre script en bas de la page. (C'est aussi la ligne directrice de Yahoo gens.) Et si vous allez faire cela, alors il n'y a pas besoin d'utiliser ready, même si bien sûr, vous pourriez si vous avez aimé.

Il y a un prix pour cela, mais: Vous devez être sûr que les choses que l'utilisateur peut voir sont prêts à être interagi avec. En déplaçant le temps de téléchargement pour une fois que la page est largement affichée, vous augmentez la possibilité à l'utilisateur de commencer à interagir avec la page avant que votre script est chargé. C'est l'un des contre-arguments à mettre la script tag à la fin. Souvent, il n'est pas un problème, mais vous devez regarder votre page pour voir si il est et, si oui, comment vous voulez traiter avec elle. (Vous pouvez mettre un petit inline script élément dans l' head qui met en place un document à l'échelle de gestionnaire d'événements de copie avec cette. De cette façon, vous obtenez de l'amélioration du temps de chargement, mais si ils essaient de faire quelque chose de trop à l'avance, vous pouvez leur dire que ou, mieux, la file d'attente de la chose qu'ils voulaient faire et de le faire lorsque votre script complet est prêt.)

1voto

line-o Points 510

en plus de @ tj-crowder:

vous pouvez utiliser head.js pour charger des sources JavaScript de manière asynchrone et parallèle

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X