Problèmes liés à l'optimisation du chargement des fichiers dans js

Ci-dessous, je partagerai avec vous un article basé sur l'optimisation du chargement des fichiers js (explication détaillée), qui a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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

Afin de permettre au moteur de rendu de restituer l'arborescence DOM le plus tôt possible, nous devons placer le script à le bas du corps afin que la page puisse être détachée le plus rapidement possible. Le phénomène d'écran blanc signifie que l'événement DOMContentLoaded sera déclenché plus tôt. Cependant, même si vous mettez le script js à la fin du corps dans IOS Safari, Android. navigateur et vue Web IOS, le résultat sera toujours le même. Des opérations supplémentaires sont donc nécessaires ici pour optimiser le chargement du fichier js.

Chargement DEFER

Il s'agit d'un attribut de script défini en HTML4, qui est utilisé pour représenter, lorsque le rendu Le moteur 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, c'est-à-dire :

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

Quand Après l'analyse de la page, il 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. Un hack est nécessaire 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)

continue d'analyser les fichiers restants et charge les ressources externes du script en parallèle.

Lorsque le script est chargé, le navigateur arrête d'analyser le document, autorise le moteur JS et spécifie le script à charger.

Après l'exécution, reprenez le script d'analyse du navigateur

On peut voir 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 doivent utiliser defer

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 Code direct :

À l'heure actuelle, les fichiers peuvent être chargés de manière asynchrone sans bloquer les effets

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

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.

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

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 des scripts 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

À propos de ça Comment choisir entre les trois 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 des deux.

Mais pour les scénarios dans lesquels une certaine compétence est utilisée seule, vous devez faire attention à quelques conseils lors de son utilisation.

Le fichier js doit être placé à la fin du corps

Si async est utilisé, 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 ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Utilisation des fonctions Async et Await dans Node.js

Résoudre le problème selon lequel Webpack ne peut pas accéder à 127.0.0.1

Implémenter la méthode de configuration de l'accès à distance dans webpack-dev-server

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!