Maison > Article > interface Web > Sujet d'optimisation JavaScript : chargement et exécution, compétences en matière de chargement et de running_javascript

Sujet d'optimisation JavaScript : chargement et exécution, compétences en matière de chargement et de running_javascript

WBOYoriginal: 2016-05-16 15:19:101003parcourir

Les performances de JavaScript dans les navigateurs peuvent être considérées comme le problème d'utilisabilité le plus important auquel sont confrontés les développeurs. Ce problème est aggravé par la nature bloquante de JavaScript, ce qui signifie que d'autres éléments ne peuvent pas être traités par le navigateur pendant l'exécution de JavaScript. En fait, la plupart des navigateurs utilisent un seul processus pour gérer plusieurs tâches telles que les mises à jour de l'interface utilisateur et l'exécution de JavaScript, et une seule tâche peut être exécutée en même temps.

Combien de temps JavaScript est exécuté, puis combien de temps il attend avant que le navigateur ne soit inactif pour répondre aux entrées de l'utilisateur.

À un niveau de base, cela signifie que la présence de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a fait attendre la page entière que le script soit analysé et exécuté. Que le code JavaScript réel soit en ligne ou contenu dans un fichier externe non lié, le processus de téléchargement et d'analyse de la page doit s'arrêter et attendre que le script termine ce traitement avant de continuer. Il s'agit d'une partie essentielle du cycle de vie de la page, car les scripts peuvent modifier le contenu de la page lors de son exécution.

Un exemple typique est la fonction document.write(), par exemple :

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

document.write(“The date is ” + (new Date()).toDateString());

</script>

</p>

</body>

</html>

Lorsque le navigateur rencontre une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, comme dans la page HTML ci-dessus, il est impossible de prédire si JavaScript ajoutera du contenu dans la balise e388a4556c0f65e1904146cc1a846bee Par conséquent, le navigateur s'arrête, exécute ce code JavaScript, puis continue l'analyse et la traduction de la page. La même chose se produit lors du chargement de JavaScript à l'aide de l'attribut src. Le navigateur doit d'abord télécharger le code du fichier externe, ce qui prend un certain temps, puis analyser et exécuter ce code. Au cours de ce processus, l'analyse des pages et l'interaction de l'utilisateur sont complètement bloquées.

La documentation HTML 4 indique qu'une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a peut être placée dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e ou 6c04bd5ca3fcae76e30b72ad730ca86d Traditionnellement, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est utilisée pour charger des fichiers JavaScript externes. En plus de ce code, la section 93f0f5c25f18dab9d176bd4f6de5d30e contient également des balises 2cdf5bf648cf2f33323966d7f58a7f3f pour charger des fichiers CSS externes et d'autres middlewares de page. Autrement dit, il est préférable de regrouper les éléments dont dépendent le style et le comportement et de les charger en premier afin que la page puisse obtenir l'apparence et le comportement corrects. Par exemple :

<html>

<head>

<title>Script Example</title>

<– Example of inefficient script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Bien que ce code semble inoffensif, il présente un problème de performances : trois fichiers JavaScript sont chargés dans la section 93f0f5c25f18dab9d176bd4f6de5d30e Étant donné que chaque balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a bloque le processus d'analyse de la page, le traitement de la page ne peut pas continuer tant qu'il n'a pas complètement téléchargé et exécuté le code JavaScript externe. Les utilisateurs doivent tolérer ce retard perçu.

N'oubliez pas que le navigateur n'affichera aucune partie de la page tant qu'il ne rencontrera pas la balise 6c04bd5ca3fcae76e30b72ad730ca86d. Placer le script en haut de la page de cette manière entraînera un retard notable, qui se manifeste généralement par : lorsque la page est ouverte, elle affiche d'abord une page vierge, et l'utilisateur ne peut ni lire ni interagir avec la page.

Internet Explorer 8, Firefox 3.5, Safari 4 et Chrome 2 permettent le téléchargement parallèle de fichiers JavaScript. Cette bonne nouvelle signifie que lorsqu'une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a télécharge une ressource externe, elle n'a pas besoin de bloquer les autres balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a Malheureusement, le téléchargement de JavaScript bloque toujours le processus de téléchargement d'autres ressources. Même si les processus de téléchargement entre les scripts ne se bloquent pas, la page doit toujours attendre que tous les codes JavaScript soient téléchargés et exécutés avant de pouvoir continuer. Ainsi, même si les navigateurs ont amélioré les performances en autorisant les téléchargements parallèles, le problème n’a pas été complètement résolu et le blocage des scripts restait un problème.

Étant donné que les scripts bloquent le processus de téléchargement d'autres ressources de la page, l'approche recommandée consiste à placer toutes les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a aussi près que possible du bas de la balise 6c04bd5ca3fcae76e30b72ad730ca86d page. Par exemple :

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

</body>

</html>

Ce code indique l'emplacement recommandé de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Bien que les téléchargements de scripts se bloquent mutuellement, la page a été téléchargée et affichée devant l'utilisateur, et la vitesse d'accès à la page ne semblera pas trop lente.

Ce qui précède est l'introduction pertinente au chargement et à l'exécution du contenu d'optimisation JavaScript. J'espère que cela sera utile à l'apprentissage de chacun.

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：Apprentissage du module AngularJS Anchor Scroll_AngularJSArticle suivant：Apprentissage du module AngularJS Anchor Scroll_AngularJS

Articles Liés

Voir plus