Tout d'abord, je veux parler du chargement et de l'exécution de JavaScript. D'une manière générale, les navigateurs ont deux fonctionnalités principales pour l'opération JavaScript: 1) exécuter immédiatement après le chargement, 2) il bloquera le contenu ultérieur de la page (y compris le rendu de page et d'autres ressources téléchargeables) pendant l'exécution. 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 séquentiellement.
Étant donné que JavaScript peut exploiter l'arbre Dom des documents HTML, les navigateurs ne téléchargent généralement pas les fichiers CSS en parallèle comme les téléchargements parallèles, car cela est dû à la particularité des fichiers JS. Donc, si votre JavaScript souhaite faire fonctionner l'élément DOM suivant, en gros, le navigateur rapportera une erreur disant que l'objet ne peut être trouvé. Parce que lorsque JavaScript est exécuté, le HTML derrière est bloqué et il n'y a pas de nœud Dom derrière l'arborescence DOM. Le programme est donc signalé comme une erreur.
La manière traditionnelle
Ainsi, lorsque vous écrivez le code suivant dans le code:
La copie de code est la suivante:
<script type = "text / javascript"
src = "http://coolshell.cn/asyncjs/alert.js"> </ script>
Fondamentalement, la balise <cript> dans la tête bloquera le chargement des ressources ultérieures et la génération de la page entière. J'ai fait un exemple spécial que vous pouvez 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 comment JavaScript bloque les choses derrière.
Donc, vous savez pourquoi de nombreux sites Web mettent JavaScript à la fin de la page Web, soit en utilisant des événements comme Window.onLad ou Docmumt prêt.
De plus, comme la plupart du code JavaScript n'a pas besoin d'attendre les pages, nous chargeons les fonctions de manière asynchrone. Alors, comment pouvons-nous charger de manière asynchrone?
Méthode Document.Write
Ainsi, vous pouvez penser que document.write () peut résoudre le problème de ne pas bloquer. Bien sûr, vous penserez qu'après que la balise Document.Write <Script> peut être exécutée, les choses suivantes peuvent être exécutées, ce qui est correct. Cela est vrai pour le code JavaScript dans la même balise de script, mais pour toute la page, cela bloquera toujours. Voici un code de test:
La copie de code est la suivante:
<script type = "text / javascript" linguistique = "javascript">
fonction chargejs (script_filename) {
document.write ('<' + 'script linguisse = "javascript" type = "text / javascript"');
document.write ('src = "' + script_filename + '">');
document.write ('<' + '/ script' + '>');
alert ("loadjs () exit ...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (script);
alert ("loadjs () fini!");
</cript>
<script type = "text / javascript" linguistique = "javascript">
alerte ("un autre bloc");
</cript>
Selon vous, quelle est l'ordre des alertes? Vous pouvez l'essayer dans différents navigateurs. Voici la page de test que vous souhaitez fermer: Exemple 2.
Déférer et asynchroniser les propriétés du script
IE a pris en charge les étiquettes de déferts depuis IE6, telles que:
La copie de code est la suivante:
<script defer type = "text / javascript" src = "./ alert.js">
</cript>
Pour IE, cette balise permettra à IE de télécharger des fichiers JS en parallèle et de maintenir leur exécution jusqu'à ce que le chargement DOM entier soit terminé (DomContent Toloaded). Multiple Defer <Script> s'exécutera également dans l'ordre dans lequel ils apparaissent lorsqu'ils sont exécutés. La chose la plus importante est qu'après ajouter un report à <Script>, il ne bloquera pas le rendu de Dom ultérieur. Cependant, parce que ce repère n'est utilisé que pour IE, il est généralement moins utilisé.
Notre HTML5 standard ajoute également un attribut qui charge JavaScript de manière asynchrone: async. Quelle que soit la valeur que vous y attribuez, tant qu'elle apparaît, elle commence à charger le fichier JS de manière asynchrone. Cependant, le chargement asynchrone aura un problème grave, c'est-à-dire qu'il implémente fidèlement le "exécuter immédiatement après le chargement", donc bien qu'il ne bloque pas le rendu de la page, vous ne pouvez pas contrôler l'ordre et le calendrier de son exécution. Vous pouvez jeter un œil à cet exemple pour en faire l'expérience.
Les navigateurs qui prennent en charge la balise asynchrone sont: Firefox 3.6+, Chrome 8.0+, Safari 5.0+, c'est-à-dire 10+, l'opéra ne le prend pas en charge (d'ici), donc cette méthode n'est pas très bonne non plus. Parce que tous les navigateurs ne peuvent pas le faire.
Créer dynamiquement DOM
Cette méthode est probablement la plus utilisée.
La copie de code est la suivante:
fonction chargejs (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 un moyen asynchrone standard de charger des fichiers JS. Pour une démonstration de cette méthode, veuillez vous référer à: Exemple 3. Cette méthode joue également avec JSONP Things, c'est-à-dire que je peux spécifier un script d'arrière-plan (tel que PHP) pour Script Src, et ce PHP renvoie une fonction JavaScript dont le paramètre est une chaîne JSON, qui revient pour appeler notre fonction JavaScript prédéfinie. Vous pouvez jeter un œil à cet exemple: T.JS (cet exemple est un petit exemple d'un appel ajax asynchrone que j'ai collecté sur Weibo auparavant)
Chargez JS de manière asynchrone à la demande
L'exemple ci-dessus de la méthode DOM résout le problème du chargement asynchrone de JavaScript, mais ne résout pas le problème que nous voulons qu'il exécute au moment où nous avons spécifié. Nous avons donc juste besoin de lier la méthode DOM ci-dessus à un certain événement.
Par exemple:
Événement lié à Window.load - Exemple 4
Vous devez comparer les différences d'exécution entre l'exemple 4 et l'exemple 3. Dans les deux exemples, j'ai spécialement utilisé un JavaScript avec le code en surbrillance pour voir l'exécution du script avec le code survain et l'exécution de mon alert.js. Vous saurez la différence)
La copie de code est la suivante:
window.load = loadjs ("http://coolshell.cn/asyncjs/alert.js")
Lié à un événement spécifique - Exemple 5
La copie de code est la suivante:
<p style = "curseur: pointeur" onclick = "loadjs ()"> Cliquez pour charger alert.js </p>
Cet exemple est très simple. Ce n'est que lorsque vous cliquez sur un élément Dom que notre alert.js sera réellement chargé.
Plus
Cependant, la liaison à un événement spécifique semble passer un peu, car le véritable téléchargement de JS ne sera effectué qu'en clic, ce qui sera à nouveau trop lent. D'accord, nous devons ici lancer notre problème ultime - nous voulons télécharger le fichier JS de manière asynchrone sur la zone locale de l'utilisateur, mais ne pas l'exécuter, seulement si nous voulons l'exécuter.
Ce serait formidable si nous avions la méthode suivante:
La copie de code est la suivante:
var script = document.createElement ("script");
script.NoExecute = true;
script.src = "alert.js";
document.body.appendChild (script);
// nous pouvons le faire plus tard
script.execute ();
Malheureusement, c'est juste un beau rêve. Aujourd'hui, notre JavaScript est encore relativement primitif, et ce "JS Dream" n'a pas encore été réalisé.
Par conséquent, nos programmeurs ne peuvent utiliser que le piratage pour le faire.
Certains programmeurs utilisent le type de script non standard pour mettre en cache JavaScript. comme:
La copie de code est la suivante:
<script type = cache / script src = "./ alert.js"> </ script>
Parce que "cache / script", cette chose ne peut pas être analysée par le navigateur du tout, donc le navigateur ne peut pas exécuter alert.js comme javascript, mais il doit télécharger le fichier js, donc cela peut être fait. Malheureusement, WebKit suit strictement les normes HTML - pour de telles choses non reconnues, ils les supprimeront directement et ne feront rien. Donc, notre rêve était à nouveau brisé.
Nous devons donc le pirater un peu plus. Tout comme n joué des images de précharge il y a de nombreuses années, nous pouvons utiliser la balise d'objet (ou la balise IFRAME), nous avons donc le code suivant:
La copie de code est la suivante:
fonction cachejs (script_filename) {
var cache = document.CreateElement ('objet');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
document.body.appendChild (cache);
}
Ensuite, nous appelons cette fonction à la fin. Veuillez consulter l'exemple connexe: Exemple 6
Appuyez sur Ctrl + Shit + I Under Chrome, passez à la page réseau, et vous pouvez voir qu'Alert.js a été téléchargé mais il n'a pas été exécuté. Ensuite, nous utilisons la méthode de l'exemple 5, car le côté du navigateur a un cache, alert.js ne sera plus téléchargé à partir du serveur. Par conséquent, la vitesse d'exécution peut être garantie.
Vous devriez être familier avec ce type de précharge. Vous pouvez également utiliser des méthodes Ajax telles que:
La copie de code est la suivante:
var xhr = new xmlHttpRequest ();
xhr.open ('get', 'new.js');
xhr.send ('');
Je n'en dirai pas plus et donnerai des exemples ici. Vous pouvez l'essayer vous-même.
Enfin, mentionnons deux JS, l'un est ControlJS et l'autre est HeadJS, qui est spécialement utilisé pour fabriquer des fichiers JavaScript asynchrones.
Ok, c'est tout le contenu. J'espère que vous pourrez comprendre le chargement et l'exécution JavaScript, ainsi que les technologies connexes après l'avoir lue. En même temps, j'espère également que tous les experts frontaux vous donneront des conseils!