Meilleure façon d'ajouter un fichier Javascript en HTML-js tutoriel-php.cn

Meilleure façon d'ajouter un fichier Javascript en HTML

Barbara Streisand

Libérer： 2024-10-09 20:33:28

original

646 Les gens l'ont consulté

Best Way to add Javascript file in HTML

En HTML, il existe plusieurs façons d'inclure un fichier JavaScript. J'expliquerai quatre méthodes différentes, leurs inconvénients et enfin, soulignerai la meilleure approche.

1. dans

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js"></script>
</head>
<body>

</body>
</html>

Copier après la connexion

Dans cette approche, lors de l'analyse du code javascript, le fichier est chargé avant le HTML à l'intérieur du corps et si le JavaScript tente de manipuler des éléments du corps qui n'ont pas encore été analysés, cela peut entraîner des erreurs, car le contenu HTML n'a pas encore été entièrement analysé. chargé.

Ce comportement de blocage retarde l'analyse et le rendu du reste de la page, affectant les performances et l'expérience utilisateur.

2. dans (à la fin)

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <script src="custom.js"></script>
</body>
</html>

Copier après la connexion

Dans cette approche, le HTML est entièrement analysé avant que le JavaScript ne soit chargé et exécuté, évitant ainsi les erreurs liées aux éléments DOM manquants. Cette approche est très bonne, mais comme l'analyse HTML et le chargement de JavaScript se produisent de manière séquentielle, cela peut prendre globalement plus de temps, car les deux processus se produisent à des moments différents

3. dans

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" async></script>
</head>
<body>
</body>
</html>

Copier après la connexion

Dans cette approche, nous rendons le JavaScript asynchrone, afin qu'il ne bloque pas le chargement du HTML. L'analyse HTML et le chargement de JavaScript s'effectuent en parallèle. Cependant, si le JavaScript s'exécute avant que le code HTML ne soit entièrement analysé et que js tente de manipuler des éléments HTML qui n'ont pas encore été chargés, cela peut provoquer des erreurs.
Remarque : — cette approche peut gagner du temps mais en chargeant html, js simultanément mais plus vulnérable aux erreurs

4. dans

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" defer></script>
</head>
<body>

</body>
</html>

Copier après la connexion

Cette approche est similaire à la troisième, où l'analyse HTML et le chargement JavaScript se produisent en parallèle. Cependant, même si le JavaScript se charge en premier, le navigateur attend que le HTML soit entièrement analysé avant d'exécuter le script

Résumé : meilleure approche

La meilleure façon est généralement d'utiliser :

Pourquoi :

Il ne bloque pas l'analyse HTML (téléchargement non bloquant).
Il garantit que le script s'exécute une fois le DOM entièrement analysé, ce qui le rend plus sûr pour la manipulation des éléments du DOM.
Il préserve l'ordre d'exécution des scripts si vous avez plusieurs scripts différés.

Dans les cas où le script est indépendant du contenu DOM (comme les scripts de suivi ou les publicités), vous pouvez utiliser async pour de meilleures performances.

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!