11487 sujets

JavaScript, DOM et API Web HTML5

Javascript sur une page externe

Bonjour,
quand on déporte du JavaScript à l'extérieur du html, on le fait avec la meta script, dans le head. Mais si on a plusieurs scripts, quelle est la bonne méthode, écrire plusieurs appels pour autant de fichiers js que l'on a ou les mettre tous dans un seul fichier ? J'ai tenté la seconde méthode, ça a fonctionné pour certains scripts, mais j'ai eu un problème avec le lecteur audio js, il ne fonctionnait tout simplement plus.
En réalité, j'ai recopié tout le JavaScript qui était dans le html dans un seul fichier, en enlevant les balises <script>. Il semble que ça puisse parfois poser des problèmes.

Je ne trouve pas trop d'infos sur le net à ce sujet.
Je travaille de la façon suivante:
- J'ai un fichier common.js qui contient la librairie de toutes les fonctions que j'utilise le plus souvent
- pour certaines fonctions complexes j'ai un fichier script qui ne contient que ces fonctions
- pour chaque page, j'ai un fichier script qui porte le nom de la page avec l'extension .js
- dans chaque page, il y a dans la balise <head>

<script type="text/javascript" src="/common.js"></script>
<script type="text/javascript" src="mapage.js"></script>

Je ne crois pas utile de chercher à n'avoir qu'un seul appel, ça n'apporte rien en terme de performances. Le fichier common.js est gros mais il se charge une fois et ensuite il reste dans le cache de l'utilisateur. Le fichier mapage.js est petit, et de plus si l'utilisateur revient sur la page il n'a pas à être rechargé.
À noter que mon "gros" fichier fait moins de 10k, soir beaucoup moins que la plupart de images.
Merci pour la réponse.
J'ai en effet effectué quelques tests et je n'ai vu aucune différence entre les deux possibilités. Je ne pense pas que ça se joue ici. Ça fonctionne très bien actuellement avec l'ensemble du JavaScript en fin de html, mais c'était pour un autre raison que je voulais le déporter.

On voit de tout sur les sites, y compris les gros sites à budget conséquent. Certains avec plusieurs scripts déportés avec les meta, d'autres avec tout le JavaScript dans le html.

La raison de ma volonté d'enlever le JavaScript du html, c'est que je voulais me faire la main sur le CSP (Content Security Policy). Mon site ne risque pas de se faire attaquer demain, c'est juste pour apprendre cette techno. Et la mise en place d'une politique CSP "nettoie" le html de tous les script et css inline. Il faut les déporter, ou alors mettre en œuvre des techniques CSP complexes et de toute façon pas recommandées.
Bonjour,

Avec HTTP/2 et au-delà, je crois que réunir plusieurs scripts en un seul fichier n'a plus tant d'importance pour les performances qu'auparavant.

C'était important en HTTP/1.x parce que la récupération de plusieurs fichiers en parallèle n'était pas possible, à moins d'ouvrir plusieurs connexions, et le nombre de connexions ouvertes simultanément est toujours très limitée.
Bonsoir Bongota,

Pour appeler le script à partir d'un fichier déporté, posons déjà les bases. On crée deux fichiers, un index.html et un scripts.js que l'on placera dans un même dossier. Simplissime, mais c'est pour la démonstration :
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Page de test</title>
  <!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
  <h1>Page de test pour un script externe</h1>
  <script src="scripts.js"></script>
</body>
</html>

// scripts.js
const sentence = "Toto est allé à la plage."
const result = sentence
  .replace(/Toto/g, "Martin")
  .replace(/plage/g, "mer");
console.log(result); // => "Martin est allé à la mer."

Après on ira plus loin.
Modifié par Olivier C (24 Sep 2023 - 23:19)
Prévenir un modérateur
Répondre au sujet
Aller à