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>

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>

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 :

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

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 :

.

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

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

Concernant

, 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

<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!