Explication détaillée d'exemples de chargement synchrone et de chargement asynchrone en JavaScript

Chargement synchrone

La forme de chargement synchrone la plus couramment utilisée est :

<script src="http://yourdomain.com/script.js"></script>

Le mode synchrone, également appelé mode de blocage, empêchera le navigateur de donner suite. Le traitement arrête l'analyse ultérieure, arrêtant ainsi le chargement ultérieur des fichiers (tels que les images), le rendu et l'exécution du code. La raison pour laquelle js doit être exécuté de manière synchrone est qu'il peut y avoir des comportements tels que la sortie du contenu du document, la modification de dom, la redirection, etc. dans js, donc l'exécution synchrone est sûre par défaut. Dans le passé, le conseil général était de placer 3f1c4e4b6b16bbbd69b2ee476dc4f83a à la fin de la page avant 36cc49f0c466276486e50c850b7e4956 pour minimiser ce comportement de blocage et permettre à la page d'être affichée en premier. Pour faire simple : la chronologie du réseau chargée est un modèle en cascade, tandis que la chronologie chargée de manière asynchrone est un modèle de concurrence.

Chargement asynchrone commun

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

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. Cette méthode consiste à utiliser js pour créer un élément de script dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Cela permet un téléchargement non bloquant du code js. L'attribut async est un nouveau support asynchrone en HTML5. Voir l'explication ci-dessous. Il est bon de l'ajouter (cela ne l'affectera pas si vous ne l'ajoutez pas). Cette méthode est appelée méthode Script DOM Element et ne nécessite pas la même origine de js. La méthode pour envelopper le code js dans une fonction anonyme et l'exécuter immédiatement consiste à protéger le nom de la variable contre les fuites vers le monde extérieur. Il s'agit d'une méthode très courante, particulièrement utilisée dans les bibliothèques js.
Par exemple, Google Analytics et Google+ Badge utilisent tous deux ce code de chargement asynchrone :

(function() { 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})();

Cependant, cette méthode de chargement empêchera l'événement onload d'être déclenché avant la fin du chargement, et maintenant de nombreuses pages Le code doit effectuer un travail de rendu supplémentaire lors du chargement, il bloquera donc toujours le traitement d'initialisation de certaines pages.

Chargement asynchrone au chargement

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})();

Cette méthode est similaire à la méthode précédente, mais la clé est qu'elle ne démarre pas le chargement asynchrone de js immédiatement, mais démarre uniquement le chargement asynchrone au chargement. Cela résout le problème du blocage du déclenchement de l’événement onload.
Supplément : événements DOMContentLoaded et OnLoad
DOMContentLoaded : La page (document) a été analysée et les éléments dom de la page sont disponibles. Cependant, les images et sous-cadres référencés dans la page n'ont peut-être pas encore été chargés.
OnLoad : toutes les ressources de la page ont été chargées (y compris les images). La progression du chargement du navigateur s'arrête à ce stade.
Ces deux moments divisent la chronologie de chargement de la page en trois étapes.

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!