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 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. </p> <p>... Même s'il y aura des blocages, il existe encore plusieurs façons de réduire l'impact de JavaScript sur les performances. </p> <p><strong>1. L'emplacement de la balise de script</strong></p> <p>Lorsque <script> apparaît dans <head>, par exemple : </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"> <head> <script type="text/javascript" src="js1.js"> Copier après la connexion 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 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, ne bloquera pas les autres balises <script> <br /> 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. <br /> Par conséquent, placer <script> au bas de la balise <body> 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. </p> <p><strong>2. Fusionner plusieurs balises de script </strong></p> <p>Lorsque le navigateur analyse HTML et rencontre <script>, il y aura un certain retard dû à l'exécution du script. Pour les liens externes avec des attributs src, <script> 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. </p> <p><strong>3. Utilisez une méthode non bloquante pour télécharger JavaScript </strong></p> <ol> <li>Utilisez les attributs defer et async de la balise script</li> <li>Utilisez des balises de script créées dynamiquement pour télécharger et exécuter du code JavaScript</li> <li>Utilisez l'objet XHR pour télécharger le code JavaScript et l'injecter dans la page<br /> </li> </ol> <p>3.1. Utiliser les attributs defer et async de la balise script</p> <p>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 <script> avec l'attribut src (script de lien externe) pour être efficaces. Ci-dessous la démo :</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"> <!DOCTYPE html> <html> <head> <title>defer example</title> </head> <body> <script type="text/javascript" src="defer.js" defer> alert("script"); window.onload= function(){ alert("load"); } defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
