javascript charge et exécute les méthodes js dans les compétences order_javascript

Cet article vous apprend principalement comment charger et exécuter dynamiquement javascript en javascript en séquence, ainsi que le code d'implémentation pour javascript. Pour ceux que cela intéresse, merci de vous y référer.

Comment éviter toute marque asynchrone, bloquante, etc. sur votre script :

Le navigateur chargera le fichier javascript de manière asynchrone, mais il sera chargé selon L'ordre d'écriture dans le fichier cité est exécuté de haut en bas pour analyser le javascript

Balise d'attribut Defer

defer est défini en html4.0, cet attribut permet au navigateur de retarder l'exécution du script et d'attendre que le document soit analysé avant de les télécharger et de les analyser dans l'ordre dans lequel ils apparaissent dans le document.

C'est-à-dire que le script avec l'attribut defer a le même effet de chargement que le fait de placer le script dans le corps

Cependant, le degré de prise en charge de l'attribut defer dans chaque navigateur est. légèrement différent, c'est-à-dire qu'il y a Le navigateur ne le prend pas entièrement en charge.

Annotation d'attribut asynchrone

async est un nouvel attribut en HTML5, et les plus avancés prennent en charge cet attribut.
La fonction de cet attribut est de permettre au script d'être chargé de manière asynchrone, ce qui signifie que lorsque le navigateur rencontre un script avec l'attribut async, le navigateur charge le css de manière asynchrone

javascript charge dynamiquement les fichiers js

Le principe est très simple, créez un nœud de script, attribuez l'attribut script au nœud, puis ajoutez-le à la balise head de le dom.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

Si on charge plusieurs fichiers javascript en même temps

loadJS('a.js');
loadJS('b.js');

L'effet ci-dessus est que les fichiers a.js et b.js seront chargés de manière asynchrone en même temps si le fichier b.js est plus petit que le a. .js, il est probable que b.js sera chargé et exécuté en premier, et ne sera pas du tout chargé et exécuté selon le résultat écrit

Donc, si votre fichier b.js dépend de quelque chose a .js, une erreur sera signalée, car lorsque b.js est interprété et exécuté, a.js est toujours en cours de chargement

Contrôlez la séquence de chargement et d'exécution du javascript

Nous réalisons le. améliorations suivantes du code

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

Par onload et sur l'attribut onreadystatechange du nœud de script pour surveiller si le nœud src est chargé

En cas de succès, appelez la fonction de rappel success();

Lorsque nous appelons cette méthode, nous pouvons utiliser la fonction de rappel loadJS pour savoir que le nœud actuel a été chargé , puis continuez à charger d'autres fichiers de script dans la fonction de rappel

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

chargé via la méthode ci-dessus , est un blocage synchrone chargement. Le fichier b.js ne sera chargé et exécuté qu'après le chargement de a.js

Si vos fichiers javascript n'ont pas d'interdépendances, n'utilisez pas cette méthode.

Recommandations associées :

La séquence de chargement et l'exécution des fichiers html, css et js

jquery popupDialog utilise la méthode de chargement de la page jsp

Plusieurs méthodes de chargement dynamique des compétences js_javascript

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!