Comment les fichiers JavaScript sont-ils chargés et exécutés?

Question

Je ne vois pas souvent de discussion ou de recherche sur le chargement et l'exécution de fichiers JavaScript. Je suis intéressé par les sites expliquant comment JavaScript est géré. En particulier, si je

<script src="a.js"></script> 
<script src="b.js"></script> 
<script src="c.js"></script> 

Je présume que a.js est téléchargé d'abord, puis b.js et enfin c.js ou sont-ils en cours de téléchargement en même temps? Et l'exécution? Les scripts de l'en-tête sont-ils préférés à ceux du corps? La principale raison pour laquelle je suis tellement intéressé par ce sujet est parce que j'écris un logiciel JavaScript qui utilise le chargement dynamique de ces scripts et parfois je reçois des erreurs comme x est indéfini (il n'a pas été chargé avant d'autres scripts), mais généralement ces erreurs ne se produiront pas. Je ne comprends pas pourquoi.

Answer 1

Les scripts sont téléchargés en parallèle, mais analysés et exécutés dans l'ordre dans lequel ils apparaissent dans le code HTML, bloquant les autres actions sur la page (y compris le rendu) jusqu'à leur exécution. Il est possible que les scripts soient non bloquants, s'ils sont ajoutés par du code JavaScript via le DOM par exemple, ou si le async attribute est présent dans les dernières versions de Firefox.

Answer 2

Ce qui contrôle le téléchargement de JavaScript est principalement votre navigateur. Si vous les chargez tous du même domaine, comme vous le faites ci-dessus, ils seront chargés l'un après l'autre, donc chargés sur l'ordre que vous avez spécifié.

En tant que test simple, vous pouvez simplement essayer de spécifier des fonctions sur chacun des fichiers et essayer de les appeler à partir du fichier suivant de la liste, afin que vous puissiez voir l'ordre qu'ils chargent. En ce qui concerne la priorité de chargement, la plupart des livres d'optimisation de site vous diront de charger vos fichiers js tout en bas, car cela va charger votre page plus rapidement, et le fichier js sera chargé comme la dernière ressource nécessaire . Cela doit être fait avec soin, si vos pages s'appuient sur le JavaScript directement lors du chargement, vous pourriez vous retrouver avec des erreurs js sans fin. Les bibliothèques comme jquery y contribueront beaucoup, car elles ne laisseront passer l'action js, une fois le DOM disponible, donc pas d'erreur js quand js est chargé en bas du HTML.

Une autre chose intéressante à faire est de s'assurer que vous gardez vos fichiers js correctement minifiés, et de vous en tenir à un minimum de fichiers, ce faisant, vous ne faites que quelques requêtes serveur, et je vais avoir votre JavaScript facilement disponible en moins de temps.

J'espère que cela vous aide.