Javascript peut-il être chargé de manière asynchrone ?

JavaScript peut être chargé de manière asynchrone. Le chargement asynchrone signifie que le navigateur continuera à traiter les pages suivantes pendant le téléchargement et l'exécution de JavaScript, ce qui peut optimiser le chargement des fichiers de script et améliorer la vitesse de chargement de la page car cela implique différents mécanismes d'analyse des fichiers de script dans chaque navigateur, donc plus ; utilise le chargement asynchrone.

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

JavaScript peut-il être chargé de manière asynchrone ?

1. Tout d'abord, vous devez comprendre ce que sont asynchrone et synchrone.

Chargement synchrone : le mode synchrone, également appelé mode de blocage, empêchera le navigateur de procéder à des traitements ultérieurs et arrêtera les traitements ultérieurs. l'analyse, donc arrêté le chargement ultérieur des fichiers (tels que les images), le rendu et l'exécution du code.

Chargement asynchrone : le chargement asynchrone est également appelé non bloquant. Le navigateur continuera à traiter les pages suivantes pendant le téléchargement et l'exécution de js.

En termes simples : la synchronisation signifie que si tu me demandes d'aller dîner, j'irai manger avec toi quand je t'entendrai ; si tu ne m'entends pas, tu continueras à m'appeler jusqu'à ce que je te dise que j'ai entendu ; toi, et ensuite nous irons manger ensemble.

Asynchrone signifie que vous m'appelez puis allez manger seul. Je peux partir immédiatement après avoir reçu la nouvelle, ou je peux attendre après avoir quitté le travail pour manger. Par conséquent, si vous souhaitez que je vous offre un repas, utilisez la méthode synchrone, et si vous souhaitez m'offrir un repas, utilisez la méthode asynchrone, afin d'économiser de l'argent.

2. Pourquoi devrions-nous utiliser l'asynchrone

pour optimiser le chargement des fichiers de script afin d'améliorer la vitesse de chargement des pages. Il a toujours été très important d'améliorer la vitesse de chargement des pages. Étant donné que chaque navigateur dispose de mécanismes différents pour analyser les fichiers de script et que le chargement de scripts bloquera le chargement d'autres ressources et fichiers, le chargement asynchrone est plus couramment utilisé.

3. Comment utiliser le chargement asynchrone

L'éditeur estime qu'il existe trois façons d'utiliser le chargement asynchrone.

async, exécuté après le chargement, ne peut charger que des scripts externes, js ne peut pas être écrit dans la balise script

//1.async  只能加载外部脚本
<script src="js/index.js" async="async"></script>

defer est chargé de manière asynchrone, mais il ne sera exécuté que lorsque le document dom sera entièrement analysé. Seul IE peut utiliser des js internes et externes

//2.defer  只能IE使用，文档解析完成以后才会去执行
<script src="js/index.js" defer="defer"></script>

Chargement à la demande, tenez compte de la compatibilité du navigateur

//3.按需求加载，考虑浏览器兼容
    function loadScript(url,callback){
            var script = document.createElement("script");
            
            if(script.readyState){  IE浏览器兼容
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readState == "loaded"){
                        callback()
                    }
                }
            }else{         大部分浏览器兼容
                script.onload = function(){  
                    callback()
                }
            }
            script.src = url;
            document.head.appendChild(script)
        }
        loadScript("08.js",function(){
            test()
        })
//外部js
function test(){
    console.log("hello world")
}

chronologie de chargement de js

1 Créez un objet Document et 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'.

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

3. Lorsqu'il rencontre un script js externe et qu'aucun async ou différé n'est 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 js externe 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)

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'.

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 async, mais l'utilisation de document.write() est également interdite)

8. L'objet document déclenche l'événement DOMContentLoaded, qui marque également la transformation de l'exécution du programme de l'étape d'exécution de script synchrone à l'étape d'exécution de script synchrone) ; la scène événementielle.

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

10. Désormais, les entrées des utilisateurs, les événements réseau, etc. seront traités de manière asynchrone.

Recommandations associées : Tutoriel d'apprentissage 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!