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

Réponses:

142

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

Si vous incluez votre scriptbalise dans headet comptez sur ready, le navigateur rencontre votre scriptbalise avant qu'elle n'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, lance l'interpréteur JavaScript et lui remet le script, puis attend pendant que l'interpréteur traite le script (puis jQuery regarde de différentes manières pour que le DOM soit prêt). (Je dis "dans le cours normal des choses" car certains navigateurs prennent en charge les attributs asyncoudefer sur les scriptbalises.)

Si vous incluez votre scriptbalise à la fin de l' bodyélément, le navigateur ne fait pas tout cela tant que votre page n'est pas en grande partie déjà 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 page. (Ceci est également la directive des gens de Yahoo .) Et si vous allez faire cela, alors il n'est pas nécessaire de l'utiliser ready, bien que vous puissiez bien sûr le faire si vous le souhaitez.

Il y a un prix à cela, cependant: vous devez vous assurer que les éléments que l'utilisateur peut voir sont prêts à interagir. En déplaçant le temps de téléchargement après que la page soit 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 scriptbalise à la fin. Souvent, ce n'est pas un problème, mais vous devez regarder votre page pour voir si c'est le cas et, si oui, comment vous voulez y faire face. (Vous pouvez mettre un petit élément en ligne script dans le headqui configure un gestionnaire d'événements à l'échelle du document pour faire face à cela. De cette façon, vous obtenez un temps de chargement amélioré, mais si ils essaient de faire quelque chose trop tôt, vous pouvez leur dire cela ou, mieux, mettre en file d'attente ce qu'ils voulaient faire et le faire lorsque votre script complet est prêt.)

TJ Crowder
la source
17
+1. Une autre façon de gérer l'interaction avant le chargement du js est de faire fonctionner la page sans JavaScript pour commencer. Assurez-vous que tous les liens fonctionnent, etc., bien qu'ils déclenchent bien sûr un rechargement de page. Puis détournez les liens et autres trucs avec js, et ajoutez votre ajax ou d'autres cloches et sifflets :)
Adrian Schmidt
1
Comment géreriez-vous la mise en file d'attente d'une action? Y a-t-il un modèle de conception ou une «solution commune» que je peux examiner à ce sujet?
HC_
@HC_: Que voulez-vous dire par "mettre une action en file d'attente"?
TJ Crowder
@TJCrowder De la dernière phrase de votre réponse: "ou, mieux, mettez en file d'attente ce qu'ils voulaient faire et faites-le lorsque votre script complet est prêt." Je me demandais simplement s'il existe des moyens "optimaux" de faire cela, car je suis sûr que je pourrais trouver "une" façon de le faire, mais je suis sûr que ce serait ... désapprouvé si quelqu'un d'autre un jour regardé quel que soit le code impliqué.
HC_
2
@HC_: Je n'ai jamais ressenti le besoin de le faire, et je ne connais pas de norme particulière pour cela. Et cinq ans plus tard, il me semble qu'il vaudrait mieux utiliser «Désolé, chargement, une seconde…» à la place. (Bien que si les choses sont si lentes à charger, vous avez un plus gros problème.) Si je vois quelque chose que je pense être cliquable, et que je clique dessus, et que rien ne se passe, le ciel sait sur quoi je clique ensuite. Si vous les mettez en file d'attente et que vous les lisez lorsque vous êtes prêt, cela pourrait être ... loin d'être idéal.
TJ Crowder
3

Votre page se chargera plus lentement en dispersant les $(document).ready()scripts dans tout le DOM (au lieu de tous à la fin) car elle nécessite que jQuery soit d' abord chargé de manière synchrone .

$ = jQuery. Vous ne pouvez donc pas utiliser $dans vos scripts sans avoir préalablement chargé jQuery. Cette approche vous oblige à charger jQuery au début de la page, ce qui arrêtera le chargement de votre page jusqu'à ce que jQuery soit entièrement téléchargé.

Vous ne pouvez pas non plus asynccharger jQuery car dans de nombreux cas, vos $(document).ready()scripts essaieront de s'exécuter avant que jQuery ne soit complètement chargé de manière asynchrone et provoquent une erreur, car encore une fois, $n'est pas encore défini.

Cela étant dit, il existe un moyen de tromper le système. Essentiellement $égal à une fonction qui pousse les $(document).ready()fonctions dans une file d'attente / un tableau. Ensuite, en bas de la page, chargez jQuery puis parcourez la file d'attente et exécutez chacun $(document).ready()à la fois. Cela vous permet de reporter jQuery au bas de la page mais de toujours l'utiliser $au-dessus dans le DOM. Personnellement, je n'ai pas testé à quel point cela fonctionne, mais la théorie est solide. L'idée existe depuis un certain temps, mais je l'ai très, très rarement vue mise en œuvre. Mais cela semble être une excellente idée:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Jake Wilson
la source