Explication détaillée du chargement et de l'exécution en JavaScript

Suite à l'article précédent "Introduction aux principes de rendu du navigateur", cet article parle du chargement et de l'exécution de JavaScript.

De manière générale, les navigateurs disposent de deux fonctionnalités principales pour exécuter JavaScript :

1) Exécuter immédiatement après le chargement

2 ) bloquera les versions ultérieures contenu de la page (y compris le rendu de la page et le téléchargement d'autres ressources) une fois exécuté

Ainsi, si plusieurs fichiers JS sont introduits, alors pour le navigateur, ces fichiers JS seront chargés en série et exécutés un après un autre.

Étant donné que JavaScript peut faire fonctionner l'arborescence DOM des documents HTML, les navigateurs ne téléchargent généralement pas les fichiers JS en parallèle comme ils téléchargent les fichiers CSS en parallèle. 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. En effet, le code HTML suivant est bloqué lors de l'exécution de JavaScript et il n'y a aucun nœud suivant lors de l'exécution du DOM. arbre.

La manière traditionnelle

Quand vous écrivez du code comme celui-ci :

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

Basique En général, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans l'en-tête bloquera le chargement des ressources suivantes et la génération de la page entière. Par exemple, dans l'exemple ci-dessus, il n'y a qu'un seul code JS (exemple) :

alert(“hello world”) ;

L'effet est qu'une boîte de dialogue apparaîtra lors du chargement de ce fichier JS, donc les ressources suivantes seront chargées uniquement après avoir cliqué sur cette boîte de dialogue, entrez et générez la page entière.

Ainsi, de nombreux sites Web mettront js à la fin de la page Web ou utiliseront des événements tels que window.load, $(document).ready(function(){}).

De plus, comme la plupart du code JavaScript n'a pas besoin d'attendre la page, nous avons besoin d'une fonction de chargement asynchrone. Alors, comment pouvons-nous le charger de manière asynchrone ?

Méthode document.write

Vous pensez peut-être que la méthode document.write() peut résoudre le problème non bloquant méthode. En écrivant la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a via la méthode document.write, vous pouvez exécuter les choses suivantes. Cela est vrai pour le code JS dans la même balise de script. Cependant, cela bloquera toujours la page entière. Ce qui suit est un code de test (exemple) :

<script type="text/javascript" language="javascript">
    function loadjs(script_filename) {
        document.write(&#39;<&#39; + &#39;script language="javascript" type="text/javascript"&#39;);
        document.write(&#39; src="&#39; + script_filename + &#39;">&#39;);
        document.write(&#39;<&#39;+&#39;/script&#39;+&#39;>&#39;);
        alert("loadjs() exit...");
    } 
    var script = &#39;http://coolshell.cn/asyncjs/alert.js&#39;;
 
    loadjs(script);
    alert("loadjs() finished!");</script>
 <script type="text/javascript" language="javascript">
   alert("another block");</script>

La boîte de dialogue qui apparaît est :

loadjs() exit...
loadjs() finished!
hello world
another block

Ensuite, la page sera affichée.

script defer et async attributs

IE est une balise defer depuis IE6, comme comme :

<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. Plusieurs reports 3f1c4e4b6b16bbbd69b2ee476dc4f83a . Seront exécutés dans l’ordre dans lequel ils apparaissent. La chose la plus importante est qu'une fois 3f1c4e4b6b16bbbd69b2ee476dc4f83a ajouté à la référence, il ne bloquera pas le rendu DOM ultérieur. Mais comme refer est uniquement destiné à IE, il est généralement moins utilisé.

Notre HMTL 5 ajoute également un attribut pour le chargement asynchrone de JavaScript : async. Quelle que soit la valeur que vous lui attribuez, tant qu'elle apparaît, il commencera à charger le fichier JS de manière asynchrone. Cependant, le chargement asynchrone d'async présente un problème sérieux, c'est-à-dire qu'il exécute fidèlement la règle « exécuter immédiatement après le chargement ». Par conséquent, même si cela ne bloque pas le rendu de la page, vous ne pouvez pas contrôler l'ordre et le timing de son exécution (exemple).

Les navigateurs qui prennent en charge la balise async sont les suivants. Opera ne la prend pas encore en charge (à partir d'ici), donc cette méthode n'est pas très bonne.

Comment créer dynamiquement un DOM

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

function 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');    if(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 pour charger des fichiers js de manière asynchrone (exemple). Cette méthode joue également avec les éléments jsonp. Autrement dit, nous pouvons spécifier un script d'arrière-plan (tel que PHP) pour le src du script, et ce PHP renvoie une fonction JavaScript dont le paramètre est une chaîne json, qui est renvoyée pour appeler notre fonction JavaScript prédéfinie. L'exemple de référence de l'auteur : t.js (Cet exemple est un petit exemple d'appel ajax asynchrone que l'auteur a précédemment sollicité sur Weibo)

Chargement asynchrone de JS à 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 notre volonté de l'exécuter au moment que je précise. Par conséquent, nous devons lier la méthode DOM ci-dessus à un certain événement.

Par exemple :

1) Se lier à l'événement window.load (exemple)

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

2) Se lier à un spécifiques Sur les événements (exemple)

<p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p>

Par exemple, lorsque l'on clique sur un élément DOM, notre fichier JS est chargé.

Plus

有的人可能会觉得绑定在某个特定事件上似乎过了一点，而在点击时才载入JS又太慢了。这里抛出一个终极问题：我们想要异步地把JS文件下载到用户本地，但是又不执行，仅当我们想要执行的时候才去执行。

作者提出了一种方式，就像多年之前玩preload图片那样，我们可以动用 object 标签（也可以使用 iframe 标签），于是有了下面的代码（示例）：

function cachejs(script_filename){   
       var cache = document.createElement('object');
    cache.data = script_filename;
    cache.id = "coolshell_script_cache_id";
    cache.width = 0;
    cache.height = 0;
    document.body.appendChild(cache);
}

在Chrome 下按F12（或者Ctrl+Shit+I），切换到 network页，可以看到 alert.js 文件已经下载了但是却没有执行弹出 "hello,world"对话框的操作。然后我们再用之前“绑在特定的事件上”的方式，因为浏览器端有缓存了，不会在从服务器上下载 alert.js 文件了，这样就能保证执行速度了。

我们还可以用Ajax的方式，比如：

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

最后再提两个JS库，一个是ControlJS，一个叫HeadJS，专门用来做异步load javascript文件的。

来源：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!