Apprenez les compétences d'optimisation du chargement de fichiers javascript_javascript

Dans la partie moteur js, nous pouvons apprendre que lorsque le moteur de rendu analyse la balise de script, il donnera le contrôle au moteur JS. Si le script charge une ressource externe, il doit attendre qu'elle soit téléchargée avant de pouvoir le faire. être exécuté. Donc, ici, nous pouvons faire un gros travail d’optimisation dessus.

placé en bas du CORPS

Pour que le moteur de rendu restitue l'arborescence DOM le plus tôt possible, nous devons placer le script en bas du corps afin que la page puisse s'échapper de l'écran blanc le plus rapidement possible, c'est-à-dire le L'événement DOMContentLoaded sera déclenché plus tôt, cependant, car dans IOS Safari, Android Même si vous placez le script js à la fin du corps dans le navigateur et la vue Web IOS, le résultat est toujours le même, des opérations supplémentaires sont donc nécessaires ici pour optimiser le. js chargement du fichier.

CHARGE DIFFÉRÉE

Il s'agit d'un attribut de script défini en HTML4. Il est utilisé pour indiquer que lorsque le moteur de rendu rencontre un script, si le script fait référence à une ressource externe, il sera temporairement suspendu et chargé. Le moteur de rendu continue d'analyser le document HTML suivant. Une fois l'analyse terminée, le script du script sera exécuté.

<script src="outside.js" defer></script>

Son support est <=IE9
De plus, son ordre d'exécution en est strictement dépendant, à savoir :

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

Lorsque la page est analysée, elle commencera à exécuter les fichiers outside1 et outside2 dans l'ordre.
Si vous utilisez defer sous IE9, vous constaterez peut-être que les deux ne sont pas exécutés séquentiellement pour gérer cela, c'est-à-dire ajouter une balise de script vide

entre les deux.

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

Chargement ASYNC

async est un attribut de script nouvellement défini dans H5. C'est un autre mode de chargement js.

• Le moteur de rendu analyse le fichier s'il rencontre un script (avec async)
• Continuez à analyser les fichiers restants et chargez les ressources externes du script en parallèle
• Lorsque le script est chargé, le navigateur arrête d'analyser le document, donne l'autorisation au moteur JS et spécifie le script chargé.
• Après l'exécution, le script d'analyse du navigateur sera restauré

On voit qu'async peut également résoudre le problème du blocage du chargement. Cependant, async est exécuté de manière asynchrone, ce qui rend l'ordre d'exécution des fichiers incohérent. C'est à dire :

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

À ce moment-là, celui qui termine le chargement en premier sera exécuté en premier. Par conséquent, les fichiers généralement dépendants ne doivent pas utiliser async mais différer.
La compatibilité de defer est relativement mauvaise, il s'agit de IE9+, mais il est généralement utilisé sur les terminaux mobiles, donc ce problème n'existe pas.

Script asynchrone

Le script asynchrone est le principe de chargement de base utilisé par certaines bibliothèques de chargement asynchrone (comme require) Entrez directement le code :

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

À ce stade, le fichier peut être chargé de manière asynchrone sans provoquer de blocage.
Cependant, les fichiers js chargés de cette manière sont dans le désordre et les fichiers dépendants ne peuvent pas être chargés normalement.
À l’heure actuelle, nous devons optimiser la fonction ci-dessus.

var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

Cependant, si vous utilisez un script pour charger en une seule étape, vous devez attendre que le fichier CSS soit chargé avant de commencer le chargement, ce qui ne peut pas profiter pleinement de l'avantage de chargement simultané du navigateur. L'utilisation de texte statique pour charger de manière asynchrone ou différée ne posera pas ce problème.

Lorsque vous utilisez un script pour charger de manière asynchrone, vous ne pouvez qu'attendre que le CSS soit chargé avant de charger
Lors de l'utilisation du chargement asynchrone statique, CSS et JS seront chargés simultanément

Concernant comment choisir entre ces trois, cela dépend principalement de l'objectif que le leader nous donne , s'il est compatible avec IE8, 9, téléphone mobile, navigateur de bureau, ou une combinaison de deux ou deux .
Mais pour le scénario d'utilisation d'une certaine compétence seule, vous devez faire attention à quelques conseils lors de son utilisation.

1. Le fichier js doit être placé à la fin du corps
2. Si vous utilisez async, ajoutez defer à la fin pour une compatibilité ascendante

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

Habituellement, les charges que nous utilisons sont des charges différées en raison de fortes dépendances.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.