Maison >interface Web >js tutoriel >Analyse du chargement Javascript

Analyse du chargement Javascript

不言original: 2018-07-11 10:36:511304parcourir

Cet article présente principalement l'analyse du chargement Javascript, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Chargement du navigateur

(1) Chargement synchrone

Dans une page Web, la façon dont le navigateur charge les fichiers js se fait via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Comme indiqué ci-dessous :

//内嵌脚本
<script type="text/javacript">    
// code here!
</script>
//加载外部脚本
<script type="text/javascript src="path/demo.js"></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a est très pratique tant qu'elle est ajoutée, le navigateur peut la lire et l'exécuter. Cependant, lors de la lecture, le navigateur suit la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Dans l'ordre d'apparition, les fichiers Javascript sont lus puis exécutés immédiatement. Par conséquent, lorsque plusieurs fichiers dépendent les uns des autres, le fichier ayant la plus petite dépendance doit être placé au premier plan et celui ayant la plus grande dépendance doit l'être. placé à la fin, sinon le code signalera une erreur. Je pense que tout le monde comprend parfaitement cela lors de l'utilisation de bootstrap. En revanche, les navigateurs chargent la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a en mode synchrone, ce qui signifie que la page attend que le fichier JavaScript soit chargé avant d'exécuter le code suivant. Lorsqu'il y a plusieurs balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a, le navigateur ne peut pas les lire en même temps. Il doit lire l'une puis l'autre, ce qui allonge considérablement le temps de lecture, la réponse de la page est lente et l'expérience utilisateur est réduite. affecté. Le mode synchrone, également appelé mode de blocage, empêchera le navigateur de procéder au traitement ultérieur et arrêtera l'analyse ultérieure. Ce n'est que lorsque le chargement en cours sera terminé que l'étape suivante pourra être effectuée. L'exécution synchrone est donc sécurisée par défaut. Mais s'il y a des comportements tels que la sortie du contenu du document, la modification du DOM, la redirection, etc. dans js, cela provoquera un blocage. Par conséquent, il est généralement recommandé de placer la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a à la fin de 6c04bd5ca3fcae76e30b72ad730ca86d, ce qui peut réduire le blocage des pages.

(2) Chargement asynchrone

Afin de résoudre ce problème, ES5 utilise la méthode DOM, charge dynamiquement les fichiers de script JavaScript .

function loadScript(url) {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

Cette méthode lit le fichier javacript de manière asynchrone en créant une nouvelle balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a et en définissant son attribut src

Cela ne provoquera pas de blocage de page, mais il y aura un autre problème. que si d'autres fichiers de script en dépendent, il n'y a aucune garantie quand ce script sera chargé.

Une autre méthode de chargement consiste à utiliser les attributs defer et async pour que le script se charge de manière asynchrone. Lorsque le moteur de rendu rencontrera cette ligne de commande, il commencera à télécharger le script externe, mais n'attendra pas qu'il soit téléchargé et exécuté, mais exécutera directement les commandes suivantes. La différence entre defer et async est la suivante : defer ne sera pas exécuté tant que la page entière n'est pas rendue normalement en mémoire (la structure DOM est complètement générée et les autres scripts sont exécutés de manière asynchrone une fois le téléchargement terminé, le moteur de rendu interrompra le rendu et) ; exécutez ce script Plus tard, continuez le rendu. Autrement dit, defer est exécuté après le rendu et async est exécuté après le téléchargement. De plus, s'il existe plusieurs scripts différés, ils seront chargés dans l'ordre dans lequel ils apparaissent sur la page, tandis que plusieurs scripts asynchrones ne peuvent pas garantir l'ordre de chargement.

IE9 et versions antérieures présentent de gros bugs dans l'implémentation du délai, ce qui entraîne un ordre d'exécution non garanti. Si vous devez prendre en charge

9a9097c5776e07f54236d5cd1dc435ae2cacc6d41bbb37262a98f745aa00fbf0
27893951ee31aa4ab68c289425ee4a992cacc6d41bbb37262a98f745aa00fbf0

Comment choisir le report et l'async. Si le script utilisé est un module et ne dépend d'aucun autre fichier de script, utilisez async ; si le script dépend d'autres scripts ou dépend d'autres scripts, utilisez defer si le fichier de script est petit et dépend d'un script async ; , utilisez le script Embed interne pour placer ce fichier devant tous les scripts asynchrones.

Une autre méthode est le chargement asynchrone de l'événement onload.

(function(){
    if(window.attachEvent) {
        window.attachEvent("load", asyncLoad);
    } else if(window.addEventListener) {
        window.addEventListener("load", asyncLoad);
    } else {        window.onload = asyncLoad;    }  
    var asyncLoad = function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.async = true;
        script.src = (&#39;https:&#39;==document.location.protocol ? &#39;https://ssl&#39; :  &#39;http:www&#39;) + &#39;.baidu.com/demo.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0];
        s.parentNode.insertBefore(script, s);
    };
)();

Cette méthode consiste à mettre la méthode d'insertion du script dans une fonction, puis à l'exécuter dans la méthode onload de la fenêtre. Cela résout le problème du blocage du déclenchement du onload. événement.

En raison de la nature dynamique de Javascript, il existe de nombreuses méthodes de chargement asynchrone : injection XHR, évaluation XHR, script dans Iframe, document.write("