Maison >
interface Web >
js tutoriel >
Façons efficaces d'utiliser la balise
Le placement des balises <script> dans un document HTML a un impact significatif sur le temps d'exécution de JavaScript par rapport au rendu du contenu HTML. Ce guide explore quatre approches clés, détaillant leurs processus d'exécution et leurs cas d'utilisation optimaux.
1. <script>Tag dans <head>
<code class="language-html"><head>
<script>
// JavaScript code here
</script>
<title>Script in Head</title>
</head>
<h1>Hello, World!</h1></code>Copier après la connexion
Copier après la connexion
Processus d'exécution :
- Le navigateur analyse le document HTML de haut en bas.
- Lorsque vous rencontrez la balise
<script> dans <head>, le rendu HTML s'interrompt pendant le téléchargement et l'exécution du script.
- Après l'exécution du script, le navigateur reprend le traitement HTML.
Inconvénients :
- Les scripts volumineux ou à chargement lent peuvent retarder le rendu des pages, entraînant un écran vide.
- Tenter de manipuler des éléments DOM dans ce script peut échouer car les éléments ne sont pas encore chargés.
Cas d'utilisation idéaux :
- Scripts contenant des fonctions non immédiatement requises, telles que des analyses ou du code de configuration.
2. <script> Balise à la fin de <body>
<code class="language-html"><title>Script at Bottom</title>
<h1>Hello, World!</h1>
<script>
// JavaScript code here
</script></code>
Copier après la connexion
Processus d'exécution :
- Le navigateur charge et restitue l'intégralité du contenu HTML.
- La balise
<script> à la fin du <body> est traitée et exécutée après le rendu de la page.
Avantages :
- Garantit un chargement HTML complet avant l'exécution du script.
- Empêche les retards de rendu et améliore l'expérience utilisateur.
- Les éléments DOM sont facilement disponibles pour la manipulation.
Inconvénients :
- Temps de chargement des pages légèrement augmenté car l'exécution de JavaScript se produit après le rendu HTML complet.
Cas d'utilisation idéaux :
- Scripts interagissant avec le contenu de la page (par exemple, écouteurs d'événements, modifications d'éléments).
3. <script>Tag avec async Attribut
<code class="language-html"><head>
<script async src="script.js"></script>
<title>Script with Async</title>
</head>
<h1>Hello, World!</h1></code>
Copier après la connexion
Processus d'exécution :
- Le navigateur charge le HTML de manière séquentielle.
- Lorsqu'il rencontre le script
async, il télécharge le script simultanément tout en poursuivant le chargement HTML.
- Une fois téléchargé, le script s'exécute immédiatement, interrompant brièvement le rendu, puis reprenant le chargement HTML.
Avantages :
- Non bloquant : le chargement du script s'effectue en arrière-plan sans retarder le rendu de la page.
- Chargement de page plus rapide grâce au téléchargement parallèle.
Inconvénients :
- Les scripts peuvent s'exécuter dans un ordre imprévisible si plusieurs
async scripts sont présents.
- Les scripts reposant sur la structure HTML peuvent s'exécuter prématurément, provoquant des erreurs.
Cas d'utilisation idéaux :
- Scripts indépendants tels que des analyses, des publicités ou des widgets de réseaux sociaux qui ne dépendent pas d'autres scripts ou éléments HTML.
4. <script>Tag avec defer Attribut
<code class="language-html"><head>
<script>
// JavaScript code here
</script>
<title>Script in Head</title>
</head>
<h1>Hello, World!</h1></code>Copier après la connexion
Copier après la connexion
Processus d'exécution :
- Le navigateur charge le HTML de manière séquentielle.
- Le script
defer est téléchargé en même temps que le HTML mais ne s'exécute qu'une fois l'intégralité du code HTML analysé.
- L'exécution a lieu juste avant l'événement
DOMContentLoaded.
Avantages :
- Assure l'exécution du script après le chargement complet de la page.
- Maintient l'ordre d'exécution des scripts si plusieurs
defer scripts sont utilisés.
- Convient aux scripts dépendant d'un DOM entièrement disponible.
Cas d'utilisation idéaux :
- Scripts manipulant le DOM une fois qu'il est complètement chargé.
Tableau de comparaison
| Méthode |
Durée d'exécution |
Rendu des blocs |
Meilleur cas d'utilisation |
ête>
| Method |
Execution Time |
Blocks Rendering |
Best Use Case |
<script> in <head>
|
Before HTML load |
Yes |
Configuration, early execution logic |
<script> at end of <body>
|
After HTML load |
No |
DOM manipulation, event handling |
<script async> |
When script is downloaded |
No (except during execution) |
Analytics, ads, independent scripts |
<script defer> |
After HTML parse |
No |
DOM-dependent scripts |
dans
|
Avant le chargement HTML |
Oui |
Configuration, logique d'exécution anticipée |
| à la fin du |
Après le chargement HTML |
Non |
Manipulation du DOM, gestion des événements |
|
Quand le script est téléchargé |
Non (sauf lors de l'exécution) |
Analyses, annonces, scripts indépendants |
<script différé> |
Après l'analyse HTML |
Non |
Scripts dépendants du DOM |
- Conclusion : meilleures pratiques
<script><body>
- Utilisez
<script async> à la fin de pour les scripts interagissant avec le contenu de la page et nécessitant un DOM entièrement chargé.-
<body>Utilisez pour les scripts indépendants tels que les analyses et les publicités.-
<head>Placez les scripts au bas du async si aucun attribut n'est utilisé pour un chargement fluide de la page.defer
Évitez de placer des scripts dans
sans ou <script> sauf si cela est absolument nécessaire pour éviter un blocage du rendu.
La Maîtrise de l'utilisation des balises est cruciale pour l'optimisation des applications Web. Le choix entre des scripts en ligne, internes, externes, asynchrones ou différés permet d'améliorer les performances, la maintenabilité du code et une expérience utilisateur supérieure.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
