Le chargement js utilise la méthode DOM pour charger dynamiquement les fichiers Javascript

Traditionnellement, le chargement de fichiers Javascript utilise la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a
Comme ceci :
559853b309d71af2b7cfa1cfce4f8bd02cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a en ajoutant une page Web et le navigateur la lira et l'exécutera. Cependant, il présente de sérieux défauts.
(1) Ordre de lecture strict. Étant donné que le navigateur lit les fichiers Javascript dans l'ordre dans lequel 3f1c4e4b6b16bbbd69b2ee476dc4f83a apparaît dans la page Web, puis les exécute immédiatement, lorsque plusieurs fichiers dépendent les uns des autres, le fichier avec le moins de dépendance doit être placé en premier, et celui avec la plus grande dépendance doit être placée en premier. Le fichier doit être placé à la fin, sinon le code signalera une erreur.
(2) Problèmes de performances. Le navigateur utilise le "mode synchrone" pour charger la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, ce qui signifie que la page sera "bloquée", en attendant que le fichier JavaScript soit chargé avant d'exécuter le code HTML suivant. Lorsqu'il y a plusieurs balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a, le navigateur ne peut pas les lire en même temps. Il doit lire l'une avant de lire l'autre, ce qui entraîne un allongement considérable du temps de lecture et un ralentissement de la réponse de la page.
Afin de résoudre ces problèmes, vous pouvez utiliser la méthode DOM pour charger dynamiquement des fichiers Javascript.

　　function loadScript(url){ 
　　　　var script = document.createElement("script"); 
　　　　script.type = "text/javascript"; 
　　　　script.src = url; 
　　　　document.body.appendChild(script); 
　　}

Le principe est que le navigateur crée instantanément une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, puis lit "de manière asynchrone" le fichier Javascript. Cela ne provoquera pas de blocage de page, mais cela entraînera un autre problème : le fichier Javascript chargé de cette manière n'est pas dans la structure DOM d'origine, donc les fonctions de rappel spécifiées dans l'événement DOM-ready (DOMContentLoaded) et l'événement window.onload ne sont pas valides. pour ça.

Pour plus d'articles sur le chargement de js sur l'utilisation de la méthode DOM pour charger dynamiquement des fichiers Javascript, veuillez faire attention au site Web PHP chinois !