Maison > Article > interface Web > Implémenter une exécution JavaScript haute performance et des connaissances de chargement_Basic

Implémenter une exécution JavaScript haute performance et des connaissances de chargement_Basic

WBOYoriginal: 2016-05-16 15:16:521672parcourir

Le navigateur utilise un seul processus lors du traitement du rendu des pages HTML et de l'exécution du script JavaScript. Ainsi, lorsque le navigateur rencontre la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a lors du rendu HTML, il exécutera d'abord le code de la balise (si l'attribut src est utilisé). Le fichier de lien externe chargé sera d'abord téléchargé puis exécuté). Pendant ce processus, le rendu de la page et l'interaction seront bloqués.

... Même s'il y aura des blocages, il existe encore plusieurs façons de réduire l'impact de JavaScript sur les performances.

1. L'emplacement de la balise de script

Lorsque 3f1c4e4b6b16bbbd69b2ee476dc4f83a apparaît dans 93f0f5c25f18dab9d176bd4f6de5d30e, par exemple :

<head>
  <script type="text/javascript" src="js1.js"></script>
  <script type="text/javascript" src="js2.js"></script>
  <script type="text/javascript" src="js3.js"></script>
</head>

Lorsque plusieurs fichiers js sont chargés, le navigateur téléchargera et exécutera d'abord le code js, bloquant le rendu de la page et entraînant une page d'écran blanc (le navigateur n'affichera aucun contenu sur la page tant qu'il n'aura pas analysé le 6c04bd5ca3fcae76e30b72ad730ca86d tag) ), il n'y a aucun moyen de prévisualiser ou d'interagir, ce qui constitue une très mauvaise expérience utilisateur.

Remarque :

Les navigateurs modernes prennent en charge le téléchargement parallèle de ressources uniquement, 3f1c4e4b6b16bbbd69b2ee476dc4f83a ne bloquera pas les autres balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a
Le téléchargement des ressources JavaScript est asynchrone, mais l'exécution du code JavaScript est toujours synchrone, ce qui entraînera également un blocage.
Par conséquent, placer 3f1c4e4b6b16bbbd69b2ee476dc4f83a au bas de la balise 6c04bd5ca3fcae76e30b72ad730ca86d pour garantir que le rendu de la page est terminé avant l'exécution du script est une méthode d'optimisation JavaScript relativement courante.

2. Fusionner plusieurs balises de script

Lorsque le navigateur analyse HTML et rencontre 3f1c4e4b6b16bbbd69b2ee476dc4f83a, il y aura un certain retard dû à l'exécution du script. Pour les liens externes avec des attributs src, 3f1c4e4b6b16bbbd69b2ee476dc4f83a plus de performances., La minimisation de ce délai est également une méthode d'optimisation. Plusieurs fichiers js peuvent être fusionnés pour réduire le nombre de requêtes HTTP, réduire le nombre de poignées de main à trois et la transmission d'en-têtes HTTP redondantes, réduire le temps de réponse et améliorer l'expérience utilisateur. Il existe de nombreuses solutions et outils pour fusionner des js sur Internet, qui ne seront pas décrits ici.

3. Utilisez une méthode non bloquante pour télécharger JavaScript

Utilisez les attributs defer et async de la balise script
Utilisez des balises de script créées dynamiquement pour télécharger et exécuter du code JavaScript
Utilisez l'objet XHR pour télécharger le code JavaScript et l'injecter dans la page

3.1. Utiliser les attributs defer et async de la balise script

Les attributs async et defer sont tous deux utilisés pour charger les fichiers js de manière asynchrone et ne bloqueront pas les autres processus du navigateur pendant le processus. La différence est que async est automatiquement exécuté après le chargement, tandis que defer doit attendre que la page soit chargée avant. en cours d'exécution. Il convient de noter qu'une chose est que ces deux attributs doivent être dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a avec l'attribut src (script de lien externe) pour être efficaces. Ci-dessous la démo :

<!DOCTYPE html>
<html>
<head>
  <title>defer example</title>
</head>
<body>
  <script type="text/javascript" src="defer.js" defer></script>
  <script>
    alert("script");
  </script>
  <script>
    window.onload= function(){
      alert("load");
    }
  </script>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
</body>
</html>

//Le fichier defer.js ne contient qu'une seule ligne de code : alert("defer");
L'exemple asynchrone a également la même structure de page. Je ne montrerai pas l'exemple ici. Vous pouvez cliquer sur le lien ci-dessous.
Cliquez ici pour le lien pour différer l'exemple !
Cliquez ici pour le lien vers un exemple asynchrone !

Bien que la structure de la page soit la même, la différence est

Ouvrez defer.html et vous verrez ce qui suit : La boîte d'alerte de "script" apparaît => La page rend le texte => La boîte d'alerte de "defer" apparaît => La boîte d'alerte de "load" apparaît
Ouvrez async.html et vous verrez ce qui suit : La boîte d'alerte pour "script" apparaît => La boîte d'alerte pour "async" apparaît => La page affiche le texte => La boîte d'alerte pour "load" apparaît

3.2. Utilisez des balises de script créées dynamiquement pour télécharger et exécuter du code JavaScript

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

file.js commence le téléchargement lorsque l'élément de script est ajouté à la page. L'avantage d'utiliser cette méthode est que le téléchargement et l'exécution de file.js ne bloqueront pas les autres processus sur la page.

D'après la démo, il est évident que la méthode de chargement dynamique peut voir le texte sur la page avant que la boîte d'alerte n'apparaisse, mais la méthode ordinaire ne peut voir le texte sur la page qu'après l'apparition de la boîte d'alerte.

Nous pouvons encapsuler une fonction multi-navigateurs qui lit les scripts de script et crée dynamiquement des balises de script :

function loadScript(url,callback){
  var script = document.createElement("script");
  script.type = "text/javascript";
  //检测客户端类型
  if(script.readyState){//IE
    script.onreadystatechange = function(){
      if(script.readyState==="loaded"||script.readyState==="complete"){
        script.onreadystatechange = null;
        callback();
      }
    }
  }else{//其他浏览器
    script.onload = function(){
      callback();
    }  
  }
  
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

Ce type de méthode de chargement de script dynamique a une bonne compatibilité et est relativement simple. Il s'agit d'une solution non bloquante couramment utilisée.

3.3. Utilisez l'objet XHR pour télécharger le code JavaScript et l'injecter dans la page

Une autre façon de charger des scripts sans bloquer est d'utiliser l'objet XMLHttpRequest (XHR) pour obtenir le script et l'injecter dans la page.
Cette technique va d'abord créer un objet XHR, puis l'utiliser pour télécharger un fichier JavaScript, et enfin injecter le code dans la page via un élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a dynamique commun.

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
  if(xhr.readyState===4){
    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
    }
  }
}

以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签,内容就是服务器接收到的responseText。

这种方法的优点以及缺点:

优点:下载JavaScript代码可以不立即执行,且兼容性好适合所有主流浏览器。
缺点:JavaScript文件必须与所请求页面处于同一个域,这种情况下JavaScript文件不能从CDN下载,不适合大型的Web应用。

4.一种推荐的无阻塞方案

如果页面有大量的JavaScript代码需要添加,可以先在页面中去外链之前我们封装好的动态读取script脚本的函数loadScript,然后再使用它去加载其他所需脚本,例如:

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
  loadScript("file.js",function(){
    //do something
  });
</script>

这样只需在第一个3f1c4e4b6b16bbbd69b2ee476dc4f83a下载比较精简的loader.js文件时对页面有些许影响,之后的3f1c4e4b6b16bbbd69b2ee476dc4f83a并不会有太多影响。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Déterminez si le navigateur est fermé ou actualisé en fonction des compétences JavaScript (super précises)_javascriptArticle suivant：Déterminez si le navigateur est fermé ou actualisé en fonction des compétences JavaScript (super précises)_javascript

Articles Liés

Voir plus