Comment charger js de manière asynchrone ? Introduction à la méthode de chargement asynchrone de js

Comment charger js de manière asynchrone ? Cet article vous présentera trois méthodes de chargement asynchrone de js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. [Recommandation du didacticiel vidéo : Tutoriel vidéo JavaScript]

Chronologie de chargement de js :

Il est né basé sur js. une série de choses que le navigateur fait en séquence enregistrée à partir de ce moment décrit la séquence de chargement, ce qui peut être utilisé pour optimiser, la base théorique, la mémoriser

1, créer un objet document pour. commencez à analyser la page Web. Ajoutez des objets Element et des nœuds Text au document après avoir analysé les éléments HTML et leur contenu textuel. À ce stade, document.readyState = 'loading'. (Générez un objet document et le bit d'état du document passe à chargement)

2 Lorsque vous rencontrez un lien CSS externe, créez un fil de discussion à charger et continuez à analyser le document.

3, lorsqu'un script js externe est rencontré et que async ou defer n'est pas défini, le navigateur se charge et se bloque, attend que le js soit chargé et exécute le script, puis continue d'analyser le document.

4. Lorsqu'il rencontre un script externe js et configure async et defer, le navigateur crée un fil de discussion à charger et continue d'analyser le document. Pour les scripts avec des attributs asynchrones, ils sont exécutés immédiatement après le chargement du script. (Il est interdit d'utiliser document.write() de manière asynchrone)

document.write() : C'est très spécial. Il traite le contenu comme un document HTML et l'affiche sur la page. parfois, lorsque vous Lorsque le document entier est presque analysé, si vous utilisez document.write(), tous vos flux de documents précédents seront effacés et le flux de documents qu'il contient sera utilisé à la place de

. La page entière n'affiche qu'un, ici Le document.write(); a ici pour fonction d'éliminer le flux de documents, et même le script est éliminé.

<p style="height:100px;width:100px;background-color:red;"></p>

<script type="text/javascript">
    window.onload = function(){
        document.write(&#39;a&#39;);
    }
</script>

5, lorsque vous rencontrez img, etc., analysez d'abord la structure dom normalement, puis le navigateur charge src de manière asynchrone et continue d'analyser le document.

6 Lorsque l'analyse du document est terminée, document.readyState = 'interactive'.

D'abord analyser, puis charger, puis le bit d'état devient interactif (actif)

Afficher la transition du bit d'état :

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}

7. Une fois l'analyse du document terminée, tous les scripts définis avec defer seront exécutés dans l'ordre. (Notez que c'est différent de l'async, mais l'utilisation de (document.write()) est également interdite ; , transformée en étape événementielle.

Exemple 1 : Imprimer a et compléter en même temps, et onDOMContentLoaded n'est pas facile à utiliser. Il ne peut être utilisé que s'il est lié à addEventListener 2 : La différence entre window.onload et le suivant

La différence est : window. onload est chargé selon les besoins, mais il peut être utilisé après avoir été analysé (c'est la méthode jQuery)

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
      console.log('a');
},false)

Exemple 3 : lorsque vous placez le script ci-dessus, il est préférable de l'écrire comme ceci, n'écrivez pas onload , n'écrivez jamais onload, mais le meilleur moyen est de l'écrire ci-dessous

$(document).ready(function(){
    //当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
    /*它的原理就是interactive和DOMContentLoaded事件*/
})

9

Une fois que tous les scripts asynchrones sont chargés et exécutés, et que img etc. sont chargés, document.readyState = 'complete', et l'objet window déclenche l'événement de chargement

10

<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <script type="text/javascript">
        document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
            var p = document.getElementsByTagName(&#39;p&#39;)[0];
            console.log(p);
        },false)
    </script>
    script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完

Désormais, les entrées utilisateur, les événements réseau, etc. sont traités de manière asynchrone. .

Le résumé est en trois points : premièrement, l'objet document est généré, ce qui signifie que le js peut être exécuté. La deuxième étape consiste à terminer l'analyse du document, et la troisième étape est que le document a été chargé et exécuté <.>

Examinons les trois façons de charger js de manière asynchrone :

---

Méthode de chargement asynchrone de js :

1), attribut async de HTML5, permettant de charger du code JavaScript de manière asynchrone

2) defer, dédié aux anciennes versions d'IE

3) Dynamiquement créer des balises de script (qui peuvent résoudre le problème de compatibilité avec h5 et la version basse, c'est-à-dire). Le code est le suivant :

Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela pourra aider tout le monde. apprendre. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

36fa79bca5f3317b9acb41ac36f86b382cacc6d41bbb37262a98f745aa00fbf0

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!