Explication détaillée de l'ordre de chargement et du principe d'exécution du JavaScript haute performance

Les performances de JavaScript dans les navigateurs peuvent être considérées comme le problème d'utilisabilité le plus grave rencontré par les développeurs. Cet article présente principalement des informations pertinentes sur l'ordre de chargement et le principe d'exécution de JavaScript hautes performances. L'article utilise un exemple de code. L'introduction est très détaillée. et a une certaine valeur de référence pour les études ou le travail de chacun. Les amis qui en ont besoin peuvent suivre l'éditeur pour apprendre ensemble.

Lorsque le navigateur rencontre la balise , le navigateur doit d'abord télécharger le fichier de lien externe, puis l'exécuter. Au cours de ce processus, la page est rendue. avec l'utilisateur est complètement bloqué.

Quel est le meilleur endroit pour mettre le script ?

Cette situation pose sans aucun doute de sérieux problèmes de performances, car le script bloquera le rendu de la page, et le rendu de la page ne continuera pas tant qu'elles ne seront pas toutes téléchargées et exécutées. L'image ci-dessous est la séquence d'exécution du code

Le premier fichier js est téléchargé. Le deuxième fichier js ne sera pas exécuté tant que le premier fichier js n'est pas complètement téléchargé. , mais maintenant IE8, Firefox3.5, Safari4 et Chrome2 autorisent tous le téléchargement parallèle de fichiers js Malheureusement, le processus de téléchargement js bloquera toujours le téléchargement d'autres ressources, telles que : Images

, donc l'une des. les moyens d'améliorer les performances sont les suivants : Placer le script en bas du corps

Organiser le script

Depuis chaque bloquera la page lors du téléchargement du rendu, il est donc essentiel de réduire le nombre de balises contenues dans la page. La solution : plusieurs fichiers js peuvent être fusionnés et regroupés dans un seul fichier js. c'est que cela peut minimiser le temps de retard et cela sera évident Améliorer les performances globales de la page, en plus de réduire les requêtes HTTP.

De manière générale, le téléchargement d'un seul fichier de 100 Ko est plus rapide que le téléchargement de quatre fichiers de 25 Ko.

S'il existe plusieurs fichiers js de liens externes, ils peuvent être fusionnés en un seul fichier js

Script non bloquant

Bien que le téléchargement d'un seul gros fichier js ne génère qu'une seule requête HTTP, cela entraînera un blocage prolongé du navigateur. Afin d'éviter cette situation, vous devez charger progressivement les fichiers js dans la page.

Script différé

L'attribut defer indique que le script contenu dans cet élément peut être retardé, mais seuls les navigateurs IE4+ et Firefox3.5+ prennent en charge

En termes simples, le mécanisme de report consiste à télécharger le fichier js avant le chargement du DOM, ce qui ne bloquera pas les autres processus du navigateur

L'ordre des fenêtres contextuelles pour les navigateurs qui ne prennent pas en charge l'attribut defer est : defer,script,load

L'ordre des fenêtres contextuelles pour les navigateurs qui prennent en charge l'attribut defer est : script, defer, load

Ainsi, defer est appelé avant l'exécution de l'événement onload

Script dynamique

Il existe deux façons d'injecter des scripts dynamiques. La première consiste à créer dynamiquement des scripts de balise, la seconde consiste à injecter la page via XMLHttpRequest

Parlons d'abord de la façon d'utiliser le premier :

Le point clé de cette technologie est le suivant : peu importe le démarrage du téléchargement, le processus de téléchargement et d'exécution du fichier ne bloquera pas les autres processus sur la page, mais lors de l'utilisation de nœuds de script dynamiques pour télécharger les fichiers js, le retour le code sera exécuté immédiatement (sauf pour Firefox et Opera, qui attendront que tous les nœuds de script dynamiques précédents soient exécutés).

Les navigateurs grand public déclencheront un événement de chargement lorsque la balise Explorer ne le fait pas, nous devons donc encapsuler une méthode compatible avec tous les navigateurs

L'inconvénient de cette méthode est qu'il faut connaître l'ordre de chargement du Lorsqu'il y a de nombreux fichiers js et que les dépendances sont complexes, il est difficile de gérer l'ordre de chargement des dépendances

Le code écrit ainsi est difficile à maintenir

La deuxième façon de créer dynamiquement des scripts

Effectivement équivalente à la création d'une balise ajouté à la page, le code sera exécuté immédiatement puis prêt.

Avantages : Le code js est téléchargé mais pas exécuté immédiatement. De cette façon, vous pouvez reporter l'exécution du script jusqu'à ce que vous soyez prêt. Cette méthode est également compatible avec tous les navigateurs.

Inconvénients : js Le fichier doit. être dans le même domaine que la page demandée. Les fichiers js ne peuvent pas être téléchargés depuis le CDN. Généralement, les grandes applications Web n'utiliseront pas cette méthode

Il est recommandé d'utiliser le mode non bloquant :

Ajoutez d'abord le code requis pour la dynamique, puis faites semblant d'initialiser le code restant de la page

[Échec du téléchargement de l'image...(image-dd3f9-1515902024710)]

Introduit ci-dessus Après avoir tant lu, j'aimerais recommander quelques bibliothèques à chargement paresseux dynamique

Il existe des bibliothèques telles que YUI3, LazyLoad et LABjs. Personnellement, je pense que la bibliothèque LABjs est plus facile à utiliser, mais je ne l'ai jamais utilisé. Vous pouvez le vérifier, la méthode d'utilisation ne sera pas mentionnée ici.

Résumé :

Plusieurs aspects de l'amélioration des performances de js

1. Avant de fermer la balise, la page. Cela garantit que le rendu de la page est terminé avant l'exécution du script

2. Fusionnez le script. Moins votre page contient de balises , plus elle se chargera et répondra rapidement. Cela est vrai quels que soient les fichiers de liens externes ou les scripts intégrés

3. Il existe de nombreuses façons de télécharger js sans bloquer

3.1 Utilisez l'attribut defer du

3.2 Utiliser des éléments créés dynamiquement pour télécharger et exécuter du code

3.3 Utiliser des objets XHR pour télécharger du code js et l'injecter dans la page

Grâce aux stratégies ci-dessus, les performances réelles des applications Web qui nécessitent une grande quantité de js peuvent être considérablement améliorées.

Recommandations associées :

Une brève analyse du chargement et de l'ordre de chargement de CSS

L'ordre de chargement et l'exécution de html, css et js

Ordre de chargement des compétences $(document).ready() et onload_javascript de jquery