$(document).ready (function () {}); vs script au bas de la page

Très peu en soi, de toute façon le DOM sera prêt pour que vous puissiez opérer (j'étais nerveux à ce sujet jusqu'à ce que je lise ceci de Google). Si vous utilisez le truc de fin de page, votre code peut être appelé le plus petit, le plus petit peu plus tôt, mais rien qui importera. Mais plus important encore, ce choix concerne l'endroit où vous liez votre JavaScript dans la page.

Si vous incluez votre script dans la balise head et de s'appuyer sur ready, le navigateur détecte votre script balise avant qu'il affiche quoi que ce soit à l'utilisateur. Dans le cours normal des événements, le navigateur s'arrête brutalement et télécharge votre script, déclenche L'interpréteur JavaScript et lui remet le script, puis attend que l'interpréteur traite le script (puis jQuery regarde de diverses manières pour que le DOM soit prêt). (Je dis "dans le cours normal des choses" parce que certains navigateurs prennent en charge le async ou defer attributs sur les balises script.)

Si vous incluez votre script balise à la fin de l'élément body, le navigateur ne fait pas tout cela tant que votre page n'est pas déjà largement affichée à l'utilisateur. Cela améliore le temps de chargement perçu pour votre page.

Donc, pour obtenir le meilleur temps de chargement perçu, placez votre script en bas de la page. (C'est aussi la ligne directrice des gens de Yahoo.) Et si vous allez le faire, alors il n'y a pas besoin d'utiliser ready, bien que bien sûr vous pourriez Si vous avez aimé.

Il y a un prix pour cela, cependant: 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 après que la page est largement affichée, vous augmentez la possibilité pour l'utilisateur de commencer à interagir avec la page avant le chargement de votre script. C'est l'un des contre-arguments pour mettre la balise script à 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 le head qui configure un gestionnaire d'événements à l'échelle du document pour faire face à cela. De cette façon, vous obtenez le temps de chargement amélioré mais si ils essaient de faire quelque chose trop tôt, vous pouvez soit leur dire cela ou, mieux, mettre en file d'attente la chose qu'ils voulaient faire et le faire lorsque votre script complet est prêt.)