Explication détaillée du chargement et de l'exécution de Javascript_Connaissances de base

Tout d'abord, je veux parler du chargement et de l'exécution de Javascript. De manière générale, les navigateurs ont deux caractéristiques majeures pour exécuter Javascript : 1) il est exécuté immédiatement après le chargement, 2) une fois exécuté, il bloque le contenu ultérieur de la page (y compris le rendu de la page et le téléchargement d'autres ressources). Par conséquent, si plusieurs fichiers js sont introduits, alors pour le navigateur, ces fichiers js sont chargés en série et exécutés en séquence.

Étant donné que javascript peut faire fonctionner l'arborescence DOM du document HTML, les navigateurs ne téléchargent généralement pas les fichiers js en parallèle avec le téléchargement des fichiers css en parallèle, car cela est dû à la particularité des fichiers js. Par conséquent, si votre javascript souhaite faire fonctionner les éléments DOM suivants, le navigateur signalera une erreur indiquant que l'objet est introuvable. Parce que lorsque Javascript est exécuté, le code HTML suivant est bloqué et il n'y a aucun nœud DOM suivant dans l'arborescence DOM. Le programme a donc signalé une erreur.

La manière traditionnelle

Donc, lorsque vous écrivez en code, écrivez le code suivant :

Copier le code Le code est le suivant :

À votre avis, quel est l’ordre des alertes ? Vous pouvez l'essayer dans différents navigateurs. Voici la page de test que vous souhaitez fermer : Exemple 2.

Attributs différés et asynchrones du script

IE prend en charge les balises de report depuis IE6, telles que :

Copier le code Le code est le suivant :

Pour IE, cette balise amènera IE à télécharger le fichier js en parallèle et à suspendre son exécution jusqu'à ce que l'intégralité du DOM soit chargée (DOMContentLoaded) sera également exécuté dans l'ordre dans lequel ils apparaissent. courir. La chose la plus importante est qu'une fois <script> ajouté au report, il ne bloquera pas le rendu DOM ultérieur. Mais comme ce report concerne uniquement IE, il est généralement moins utilisé. </p> <p>Notre standard HTML5 ajoute également un attribut pour le chargement asynchrone de javascript : async Quelle que soit la valeur que vous lui attribuez, tant qu'il apparaît, il commencera à charger les fichiers js de manière asynchrone. Cependant, le chargement asynchrone de async présente un problème sérieux, c'est-à-dire qu'il implémente fidèlement la règle militaire « exécuter immédiatement après le chargement ». Par conséquent, même s'il ne bloque pas le rendu de la page, vous ne pouvez pas en contrôler l'ordre et le timing. de son exécution. Vous pouvez jeter un œil à cet exemple pour vous en faire une idée. </p> <p>Les navigateurs qui prennent en charge les balises asynchrones sont : Firefox 3.6, Chrome 8.0, Safari 5.0, IE 10, Opera ne les prend pas encore en charge (à partir d'ici), donc cette méthode n'est pas très bonne. Parce que tous les navigateurs ne peuvent pas le faire. </p> <p>Création dynamique de DOM</p> <p>Cette méthode est probablement la plus couramment utilisée. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="53194" class="copybut" id="copybut53194" onclick="doCopy('code53194')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code53194"> <br> fonction loadjs(script_filename) {<br> var script = document.createElement('script');<br> ​ script.setAttribute('type', 'text/javascript');<br> ​ script.setAttribute('src', script_filename);<br> ​ script.setAttribute('id', 'coolshell_script_id');<br> <br> ​ script_id = document.getElementById('coolshell_script_id');<br> Si(script_id){<br>            document.getElementsByTagName('head')(0).removeChild(script_id);<br> ><br> Document.getElementsByTagName('head')[0].appendChild(script);<br> ><br> <br> var script = 'http://coolshell.cn/asyncjs/alert.js';<br> loadjs(script);<br> </div> <p>Cette méthode est presque devenue le moyen standard de charger des fichiers js de manière asynchrone. Pour une démonstration de cette méthode, veuillez consulter : Exemple 3. Cette méthode a également été exploitée par JSONP, c'est-à-dire que je peux spécifier un script d'arrière-plan (comme PHP) pour le src du script, et ce PHP renvoie une fonction javascript dont le paramètre est une chaîne json, et renvoie Appeler notre javascript prédéfini fonction. Vous pouvez jeter un œil à cet exemple : t.js (Cet exemple est un petit exemple d'appel ajax asynchrone que j'ai déjà sollicité sur Weibo) </p> <p>Charger js de manière asynchrone à la demande</p> <p>L'exemple ci-dessus de méthode DOM résout le problème du chargement asynchrone de Javascript, mais il ne résout pas le problème de vouloir qu'il s'exécute au moment que nous spécifions. Par conséquent, il nous suffit de lier la méthode DOM ci-dessus à un certain événement. </p> <p>Par exemple : </p> <p>Lien à l'événement window.load - Exemple 4</p> <p>Vous devez comparer les différences d'exécution entre l'exemple 4 et l'exemple 3. J'ai spécifiquement utilisé un code mettant en évidence javascript dans les deux exemples pour voir l'exécution et l'exécution du script de mise en évidence du code. Vous connaîtrez la différence en fonction de l'exécution de mon alerte. .js) </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="34632" class="copybut" id="copybut34632" onclick="doCopy('code34632')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code34632"> <br> window.load = loadjs("<a href="http://coolshell.cn/asyncjs/alert.js">http://coolshell.cn/asyncjs/alert.js</a>")<br> </div> <p>Lien avec un événement spécifique - Exemple 5</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="16878" class="copybut" id="copybut16878" onclick="doCopy('code16878')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code16878"> <br> <p style="cursor: pointer" onclick="LoadJS()">Cliquez pour charger alert.js </p><br> </div> <p>Cet exemple est très simple. Lorsque vous cliquez sur un élément DOM, notre alert.js sera effectivement chargé. </p> <p>Plus</p> <p>Cependant, la liaison à un événement spécifique semble être un peu trop lourde, car le js ne sera réellement téléchargé que lorsqu'on clique dessus, ce qui serait trop lent. D'accord, nous arrivons ici à notre question ultime : nous voulons télécharger de manière asynchrone le fichier js dans la zone locale de l'utilisateur, mais pas l'exécuter, l'exécuter uniquement lorsque nous voulons l'exécuter. </p> <p>Ce serait génial si nous avions quelque chose comme ça : </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="43581" class="copybut" id="copybut43581" onclick="doCopy('code43581')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code43581"> <br> var script = document.createElement("script");<br> script.noexecute = true;<br> script.src = "alerte.js";<br> document.body.appendChild(script);<br> <br> //Nous pourrons le faire plus tard<br> script.execute();<br> </div> <p>Malheureusement, ce n'est qu'un beau rêve. Aujourd'hui, notre Javascript est encore relativement primitif, et ce "rêve JS" n'a pas encore été réalisé. </p> <p>Ainsi, nos programmeurs ne peuvent utiliser que des méthodes de piratage pour le faire. </p> <p>Certains programmeurs utilisent des types de scripts non standard pour mettre en cache javascript. Tel que : </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63471" class="copybut" id="copybut63471" onclick="doCopy('code63471')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code63471"> <br> <script type=cache/script src="./alert.js"></script>