Explication détaillée de la façon d'optimiser le code pour le chargement de fichiers 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 être exécuté. Donc, ici, nous pouvons faire un gros travail d’optimisation dessus.

Placez-le en bas du BODY

Pour que le moteur de rendu restitue l'arborescence DOM le plus tôt possible, nous devons placer le script en bas du corps. Si la page quitte l'écran blanc le plus tôt possible, l'événement DOMContentLoaded sera déclenché plus tôt. Cependant, même si vous placez le script js à la fin du corps dans IOS Safari, le navigateur Android et. Vue Web IOS, le résultat sera toujours le même, donc des opérations supplémentaires sont nécessaires pour gérer le chargement du fichier js.

Chargement DEFER

Ceci est un script attribut défini en HTML4, qui sert à 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
Et son ordre d'exécution est strictement dépendant, soit :

<. 🎜>

<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. Ici, vous avez besoin d'un hack pour le gérer, c'est-à-dire d'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 et s'il rencontre un script (avec async)

• Continuer à analyser les fichiers restants et charger les ressources externes du script en parallèle

• Lorsque le script est chargé, puis le navigateur interrompt l'analyse du document, autorise le moteur JS et spécifie le script à charger.

• 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 :

À ce moment-là, celui qui termine le chargement en premier sera exécuté en premier. Par conséquent, pour les fichiers dépendants généraux, vous ne devez pas utiliser async mais devez utiliser defer

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

defer a une mauvaise compatibilité, qui est 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 (telles que require) Entrez directement le code :

.

À l'heure actuelle, les fichiers peuvent être chargés de manière asynchrone sans 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. À ce stade, nous devons optimiser la fonction ci-dessus

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

Cependant, si vous utilisez un script pour charger en une seule étape, vous devez attendre le CSS. fichier à charger avant de commencer le chargement. Impossible de tirer pleinement parti des capacités de chargement simultané du navigateur. Ce problème ne se produit pas lors de l’utilisation de texte statique pour charger de manière asynchrone ou différée.

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);});

Lorsque vous utilisez un script pour charger de manière asynchrone, vous ne pouvez attendre que le CSS soit chargé avant de charger

Lorsque vous utilisez le chargement asynchrone statique, les 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, un téléphone mobile, un navigateur de bureau ou une combinaison de deux et 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

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

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

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!