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 :

<script type="text/javascript"
src="http://coolshell.cn/asyncjs/alert.js"></script>

En gros, la balise <script> dans l'en-tête bloquera le chargement des ressources suivantes et la génération de la page entière. J'ai fait un exemple spécial pour que vous puissiez y jeter un œil : Exemple 1. Remarque : Il n'y a qu'une seule phrase dans mon alert.js : alert("hello world"), ce qui vous permet de voir plus facilement comment javascript bloque les éléments suivants.

Vous savez donc pourquoi de nombreux sites Web mettent du javascript à la fin de la page Web ou utilisent des événements tels que window.onload ou docmuemt ready.

De plus, comme la plupart des codes Javascript n'ont pas besoin d'attendre la page, nous avons une fonction de chargement asynchrone. Alors, comment charger de manière asynchrone ?

Méthode document.write

Donc, vous pensez peut-être que document.write() peut résoudre le problème sans bloquer. Bien sûr, on pourrait penser qu'après document.write la balise <script>, vous pouvez exécuter les choses suivantes, ce qui est correct. Cela est vrai pour le code Javascript dans la même balise de script, mais pour la page entière, cela bloquera toujours. Ce qui suit est un code de test :

Copier le code Le code est le suivant :

<script type="text/javascript" langage="javascript">
Fonction loadjs(script_filename) {
         document.write('<' 'script language="javascript" type="text/javascript"');
           document.write(' src="' script_filename '">');
document.write('<' '/script' '>');
alert("loadjs() sortie...");
>
var script = 'http://coolshell.cn/asyncjs/alert.js';
Loadjs(script);
alert("loadjs() terminé !");
</script>
<script type="text/javascript" langage="javascript">
alert("un autre bloc");
</script>

À 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 :

<script defer type="text/javascript" src="./alert.js" >
</script>

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

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.

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.

Création dynamique de DOM

Cette méthode est probablement la plus couramment utilisée.

Copier le code Le code est le suivant :

fonction loadjs(script_filename) {
var script = document.createElement('script');
​ script.setAttribute('type', 'text/javascript');
​ script.setAttribute('src', script_filename);
​ script.setAttribute('id', 'coolshell_script_id');

​ script_id = document.getElementById('coolshell_script_id');
Si(script_id){
           document.getElementsByTagName('head')(0).removeChild(script_id);
>
Document.getElementsByTagName('head')[0].appendChild(script);
>

var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);

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)

Charger js de manière asynchrone à la demande

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.

Par exemple :

Lien à l'événement window.load - Exemple 4

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)

Copier le code Le code est le suivant :

window.load = loadjs("http://coolshell.cn/asyncjs/alert.js")

Lien avec un événement spécifique - Exemple 5

Copier le code Le code est le suivant :

<p style="cursor: pointer" onclick="LoadJS()">Cliquez pour charger alert.js </p>

Cet exemple est très simple. Lorsque vous cliquez sur un élément DOM, notre alert.js sera effectivement chargé.

Plus

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.

Ce serait génial si nous avions quelque chose comme ça :

Copier le code Le code est le suivant :

var script = document.createElement("script");
script.noexecute = true;
script.src = "alerte.js";
document.body.appendChild(script);

//Nous pourrons le faire plus tard
script.execute();

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

Ainsi, nos programmeurs ne peuvent utiliser que des méthodes de piratage pour le faire.

Certains programmeurs utilisent des types de scripts non standard pour mettre en cache javascript. Tel que :

Copier le code Le code est le suivant :

<script type=cache/script src="./alert.js"></script>

En raison du "cache/script", cette chose ne peut pas du tout être analysée par le navigateur, donc le navigateur ne peut pas exécuter alert.js en javascript, mais il doit télécharger le fichier js pour que le problème puisse être résolu. C'est dommage que webkit soit strictement conforme aux normes HTML - pour les choses que vous ne reconnaissez pas, supprimez-les simplement et ne faites rien. Notre rêve s’est donc encore une fois brisé.

Donc, nous devons pirater à nouveau, tout comme la façon dont nous avons joué avec les images préchargées il y a de nombreuses années, nous pouvons utiliser la balise object (ou la balise iframe), nous avons donc le code suivant :

Copier le code Le code est le suivant :

fonction cachejs(script_filename){
var cache = document.createElement('object');
cache.data = script_filename;
​ cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.hauteur = 0;
Document.body.appendChild(cache);
>

Ensuite, nous appelons cette fonction à la fin. Veuillez jeter un œil aux exemples pertinents : Exemple 6

Appuyez sur Ctrl Shit I dans Chrome et passez à la page réseau. Vous pouvez voir que alert.js a été téléchargé mais pas exécuté. Ensuite, nous utiliserons la méthode de l'exemple 5 car il y a un cache côté navigateur et il. ne sera plus exécuté. Téléchargez alert.js depuis le serveur. La vitesse d’exécution peut donc être garantie.

Vous devriez être familier avec ce type de préchargement. Vous pouvez également utiliser Ajax, comme :

Copier le code Le code est le suivant :

var xhr = nouveau XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');

Je n’en dirai pas plus ici et je ne donnerai pas d’exemples. Vous pouvez l’essayer vous-même.

Enfin, permettez-moi de mentionner deux js, ​​l'un est ControlJS et l'autre s'appelle HeadJS, qui est spécialement utilisé pour charger des fichiers javascript de manière asynchrone.

D'accord, c'est tout le contenu. J'espère qu'après l'avoir lu, vous pourrez comprendre le chargement et l'exécution de Javascript, ainsi que les technologies associées. En parallèle, j'espère aussi que tous les experts du front-end vous donneront quelques conseils !