89 votes

JavaScript discret :<script></script>

J’ai récemment lu le manifeste de Yahoo Conseillées pour Speeding Up Your Web Site. Ils recommandent de mettre l’inclusion de JavaScript en bas du code HTML lorsque nous le pouvons.

Mais où exactement et quand ?

Nous devrions le mettre avant fermeture ou après ? Et surtout, quand devons nous encore mettre dans le section ?

87voto

domgblackwell Points 2333

Il y a deux possibilités pour vraiment discrète scripts:

  • y compris un fichier de script externe via une balise script dans la section d'en-tête
  • y compris un fichier de script externe via une balise script dans le bas du corps (avant </body></html>)

Le second peut être plus rapide que l'original Yahoo recherche a montré que certains navigateurs vous essayez de charger des fichiers de script quand ils ont frappé la balise de script et, par conséquent, ne pas charger le reste de la page jusqu'à ce qu'ils aient terminé. Toutefois, si votre script est un "prêt" de la partie doit exécuter dès que le DOM est prêt, vous pouvez avoir besoin de l'avoir dans la tête. Un autre problème est la mise en page - si votre script est en passe de changer la mise en page que vous voulez le charger dès que possible, de sorte que votre page n'est pas de passer un long moment de redessiner lui-même en face de vos utilisateurs.

Si le script externe site est sur un autre domaine (comme les widgets externes) il peut être intéressant de le mettre à fond pour éviter de retarder le chargement de la page.

Et pour tout les problèmes de performances de faire vos propres repères - ce qui est peut-être vrai à une époque où l'étude est réalisée peut changer avec votre propre configuration locale ou à des changements dans les navigateurs.

31voto

Eran Galperin Points 49594

Il n'est jamais aussi coupé et sec - Yahoo recommande de mettre les scripts juste avant la balise fermante </body> balise, ce qui permettra de créer l'illusion que la page se charge plus vite sur un cache vide (vu que les scripts ne les empêcheront pas de télécharger le reste du document). Toutefois, si vous avez un peu de code que vous voulez exécuter au chargement de la page, il suffira de lancer l'exécution d'après l'ensemble de la page est chargée. Si vous mettez les scripts dans la balise <head>, pour commencer l'exécution avant - donc sur un apprêt cache de la page ne figurent pour charger plus rapidement.

Aussi, le privilège de mettre les scripts en bas de la page n'est pas toujours disponible. Si vous avez besoin d'inclure des scripts dans votre point de vue qui dépend d'une bibliothèque ou quelque autre code JS en cours de chargement avant, vous devez charger les dépendances dans la balise <head>.

Dans l'ensemble de Yahoo recommandations sont intéressantes, mais pas toujours applicable et doit être considérée au cas par cas.

21voto

Lazlow Points 1328

Comme d'autres l'ont dit, le lieu avant la fermeture du corps html tags.

L'autre jour, nous avons eu de nombreux appels de clients se plaignant de leurs sites ont été extrêmement lente. Nous avons visité sur place et a constaté qu'ils ont pris 20 à 30 secondes pour charger une page. Pensant que c'était les serveurs qui font mal, nous avons enregistré sur - mais à la fois web et les serveurs sql sont ~0% de l'activité.

Après quelques minutes, nous avons réalisé un site externe, qui nous reliaient à pour Javascript, des tags de tracking. Cela signifiait que les navigateurs ont frappé le script dans la balise head de la section du site et d'attente pour télécharger le fichier de script.

Donc, pour la 3e partie/scripts externes au moins, je conseillerais de le mettre comme la dernière chose sur la page. Alors, s'ils n'étaient pas disponibles, le navigateur aurait au moins le chargement de la page jusqu'à ce point - et que l'utilisateur serait inconscient.

16voto

lukewendling Points 959

Pour résumer, basé sur les suggestions ci-dessus :

  1. Pour externe scripts (Google analytique, 3ème partie commercialisation trackers, etc.) les placer avant la balise /body.
  2. Pour les scripts qui affectent la mise en page, insérez dans la tête.
  3. Pour les scripts qui s’appuient sur « prêt dom » (comme jquery), pensez à placer avant /body sauf si vous avez une raison de bord-cas pour placer les scripts en tête.
  4. S’il y a des scripts inline avec dépendances, placez les scripts requis dans la tête.

5voto

Laurie Young Points 37065

Non, il ne devrait pas être après l' </html> , comme ce serait invalide. Le meilleur endroit pour mettre les scripts est juste avant l' </body>

C'est essentiellement parce que la plupart des navigateurs arrêter le rendu de la page alors qu'ils eval le script que vous fournissez. De sorte que son OK pour mettre les non-blocage de code n'importe où dans la page (je ne fais que de penser à des choses que attacher les fonctions de l' onLoad événement, depuis l'événement de liaison est si vite que pour être réellement libre). Un grand tueur est ici au début de la page mettre certaines ad serveur de script, ce qui peut empêcher le chargement de la page, avant les annonces ont totalement téléchargé, faire de votre temps de chargement des pages ballon

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