web-dev-qa-db-fra.com

Pourquoi les scripts à la fin de la balise body

Je sais que cette question a été posée plusieurs fois, mais je n'ai pas trouvé de réponse. Alors pourquoi est-il recommandé d'inclure des scripts à la fin de la balise body pour un meilleur rendu?

From Udacity course https://www.udacity.com/course/ud884 - le rendu démarre une fois que DOM et CSSOM sont prêts. JS est un blocage d'analyse HTML et tout script démarre une fois que CSSOM est prêt.

Donc, si nous avons:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="script.js"></script>
    </body>
</html>

Le CRP serait:

CSSOM ready > JS execute > DOM ready > Rendering

Et si le script est en tête:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

Le CRP serait le même:

CSSOM ready > JS execute > DOM ready > Rendering

Cette question concerne uniquement les scripts "sync" (sans attribut async/defer).

javascripthtmlcsswebpageload
18
Artem Svirskyi

Historiquement, les scripts empêchaient le téléchargement plus rapide de ressources supplémentaires. En les plaçant en bas, votre style, votre contenu et vos médias pourraient être téléchargés plus rapidement, donnant la perception d'une amélioration des performances.

Pour en savoir plus: les attributs async et defer .

19
Sampson

À mon avis, c'est une pratique dépassée. Plus récemment, la préférence est pour JavaScript de séparer tout code qui nécessite la présence du DOM dans un écouteur d'événement "DOMContentLoaded". Ce n'est pas nécessairement tout logique; beaucoup de code peut s'initialiser sans avoir accès au DOM complet.

Il est vrai que cela provoque un petit moment lorsque seul le fichier de script est récupéré, et rien d'autre (par exemple, des images). Cette petite fenêtre peut être ignorée en ajoutant l'attribut async, mais même sans elle, je recommande de mettre des balises de script dans la tête afin que le navigateur sache le plus tôt possible pour les charger, plutôt que de les enregistrer (et tout futur Demandes initiées par JS) pour la dernière.

4
Katana314

Je pense que cela dépend de votre site Web ou de votre application. Certaines applications Web sont basées sur JavaScript. Il n'est alors pas logique de l'inclure au bas de la page, mais de la charger immédiatement. Si JavaScript ajoute simplement des fonctionnalités moins importantes à une page basée sur le contenu, alors mieux le charger à la fin. Le temps de chargement sera presque le même, mais l'utilisateur verra les parties importantes plus tôt (avant le chargement de la page).

Il ne s'agit pas de charger un site entier plus rapidement, mais de donner à l'utilisateur l'impression d'un site Web se chargeant plus rapidement.

Par exemple: C'est pourquoi les sites Web basés sur Ajax peuvent donner une impression beaucoup plus rapide. L'interface est toujours la même. Seules certaines parties du contenu seront modifiées.

1
user4975367

Les images placées sous la balise de script attendront de se charger jusqu'au chargement du script JS. En plaçant la balise de script en bas, vous chargez d'abord les images, donnant l'apparence d'un chargement de page plus rapide.

1
Brian

Ce lien était extrêmement utile. Pour une page Web donnée, un modèle d'objet de document est créé à partir du .html. Un modèle d'objet CSS est également créé à partir de .css.

Nous savons également que les fichiers JS modifient également les objets. Lorsque le navigateur rencontre une balise, la création de modèles d'objets DOM et CSS est immédiatement interrompue lorsque le script est exécuté car il peut tout modifier. Par conséquent, si le fichier js devait extraire des informations de l'un ou l'autre des arbres (modèle d'objet DOM et CSS), il n'aurait pas suffisamment d'informations.

Par conséquent, les scripts sont généralement à la fin du corps où la plupart des arbres ont déjà été rendus.

0
DFeng