Déplacez jQuery vers la fin de l'étiquette du corps?

Mon ami a lu un article qui a mentionné que le déplacement de tous les fichiers JavaScript jusqu'à la fin de l'étiquette du corps de fermeture ( </body> ) améliorera les performances d'une page Web.

J'ai déplacé tous les fichiers JS jusqu'à la fin, sauf les fichiers JQuery et JS qui attachent un événement à un élément sur la page, comme ci-dessous;

 $(document).ready(function(){ //submit data $("#create_video").click(function(){ //... }); }); 

Mais il dit de déplacer le fichier de la bibliothèque jQuery à la fin de l'étiquette du corps.

Je ne pense pas que ce soit possible, car je suis en train de joindre de nombreux événements aux éléments de la page en charge à l'aide de sélecteurs jQuery, et pour utiliser les sélecteurs jQuery, il faut charger la bibliothèque jQuery d'abord.

Est-il possible de déplacer le fichier de bibliothèque JQuery vers la fin de la page juste avant de fermer l'étiquette du corps ( </body> ) ??

Merci

La fonction $(document).ready indique de ne pas fonctionner jusqu'à ce que le DOM ait fini d'être instancié – afin de le déplacer après que le corps soit correct tant que la bibliothèque JQuery est chargée en premier. Non conventionnel et certaines hypothèses peuvent ne pas être correctes mais d'accord.

C'est une pratique courante de déplacer tous vos js au bas de votre page. C'est parce que lorsqu'un navigateur charge le script, il ne génère pas un nouveau thread pour le faire, alors le navigateur attendra jusqu'à ce qu'il ait chargé le script avant de passer à la ligne suivante.

Ce que cela signifie pour vos utilisateurs, c'est qu'ils verront un écran vierge. Beaucoup mieux de leur faire voir la page complète (ish) alors qu'il ne semble pas qu'elle soit bloquée.

Il suffit de prendre en compte que le fichier jQuery JavaScript doit être chargé avant tout appel à la fonction $(...) .

Utilisez une «Filetage Dom Ready» pour collecter les fonctions à exécuter une fois que jQuery est chargé et que le DOM est prêt.

Exemple:

 <html> <head> <script type="text/javascript"> var domReadyQueue = []; </script> </head> <body> ... <div class="foo"></div> <script type="text/javascript"> domReadyQueue.push(function($){ $('.foo').doSomething(); }) </script> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ while (domReadyQueue.length) { domReadyQueue.shift()(jQuery); } }); </script> </body> </html> 

La raison pour laquelle cet article vous a demandé de déplacer des scripts vers le bas, c'est d'autoriser d'autres objets à être téléchargés en premier. (Css et images, ce qui accélérera les temps de rendu apparents)

C'est parce que HTTP 1.1 recommande uniquement le téléchargement de 2 éléments par nom d'hôte. Et vous voudriez certainement que votre fichier css soit l'un des premiers fichiers téléchargés, plutôt que javascript qui pourrait rendre le site plus lent (juste parce que le navigateur n'a pas encore le fichier css et n'est pas sûr Ce qu'il devrait faire avec le html)

Mais si vous avez utilisé google pour héberger votre jQuery, cela se téléchargerait en parallèle et annulerait toute raison pour le déplacer vers le bas de vos pages.

Alternativement, vous pouvez configurer un deuxième nom d'hôte pour héberger du contenu statique (tel que css / scripts / images).

Mais google a déjà fait du travail pour vous, il est donc judicieux de l'utiliser s'il le convient. 🙂

Q – Pourquoi je vois souvent JavaScript écrit / inclus avant l'élément de fermeture du corps dans un (x) document HTML?

Les éléments A – DOM ne peuvent pas être consultés par JavaScript jusqu'à ce que le navigateur ait chargé les éléments HTML dans le DOM. En plaçant JavaScript à la fin d'un (x) document HTML (avant l'élément de fermeture du corps), vous vous assurerez que le script est appelé dès que le DOM est construit / chargé et prêt à manipuler. Un avantage de cette approche est que le code JavaScript est exécuté juste après la construction du DOM et éventuellement avant que l'événement Onload ne déclenche.

Les débutants JavaScript se déclenchent constamment en plaçant un code qui manipule le DOM dans l'élément d'en-tête d'un (x) document HTML. Cela provoque une erreur car le DOM n'a pas encore été construit et n'est donc pas encore accessible à JavaScript qui traverse / manipule le DOM.

Des techniques d'exécution et de surcharge de JavaScript dans les navigateurs Web

Utilisez un javascript discret (en ajoutant des auditeurs d'événements aux éléments au lieu de onclik = "…" etc.). Mettez tous vos fichiers .js au bas de la balise du corps, la bibliothèque principale (jQuery dans ce cas) est placée en premier et tout ira bien. Vous pouvez utiliser un bundler comme bundle fu

Vous verrez une grande performance stimuler le chargement de votre page.