Comment implémenter un ordre de chargement hautes performances en javascript

Cet article vous présente principalement les informations pertinentes sur l'ordre de chargement et le principe d'exécution du JavaScript haute performance. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. J’ai besoin d’amis, étudions ensemble.

Avant-propos

Les performances de JavaScript dans le navigateur peuvent être considérées comme le problème d'utilisabilité le plus grave rencontré par les développeurs aujourd'hui, moi-même après avoir lu le. chapitre sur le chargement et l'exécution de javascript hautes performances, parlons de la façon de résoudre l'ordre de chargement et les principes d'exécution de js. Je ne dirai pas grand-chose ci-dessous, jetons un œil à l'introduction détaillée :

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, le rendu de la page et l'interaction de l'utilisateur sont complètement bloqués.

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 jusqu'à ce qu'elles soient toutes téléchargées et exécutées. continue. 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é. . js, mais désormais 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 une des manières d'améliorer les performances : mettre le script en bas du corps

Organiser le script Étant donné que chaque balise bloquera le rendu de la page lors du téléchargement, il est essentiel de réduire le nombre de balises : Vous pouvez fusionner plusieurs fichiers js. L'avantage de le regrouper dans un fichier js est que cela peut minimiser le temps de retard et améliorer considérablement les performances globales de la page. De plus, cela peut également réduire les requêtes HTTP.

De manière générale, télécharger un seul fichier de 100 Ko est plus rapide que télécharger 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 IE4+ et Firefox3.5+ peuvent parcourir Le navigateur prend en charge

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

L'ordre des pop-ups pour les navigateurs qui ne prennent pas en charge l'attribut defer est : defer,script,load

L'ordre des pop-ups pour les navigateurs qui prennent en charge l'attribut defer est : script, defer, load

Donc, defer est appelé avant que l'événement onload ne soit exécuté

Script dynamique Là Il existe deux façons d'injecter des scripts dynamiques. La première consiste à créer dynamiquement des balises de script et la seconde consiste à injecter la page via XMLHttpRequest

Parlons d'abord de la façon d'utiliser la première méthode :

Le point clé de cette technologie est le suivant : peu importe le moment où le téléchargement est démarré, le processus de téléchargement et d'exécution du fichier ne bloquera pas les autres processus sur la page, mais quand en utilisant des nœuds de script dynamiques pour télécharger des fichiers js, le code renvoyé sera exécuté immédiatement (sauf pour Firefox et Opera, ils attendront la fin de l'exécution de tous les nœuds de script dynamiques précédents)

Dans les navigateurs grand public, un événement de chargement sera être déclenché lorsque la balise est reçue, mais pas le navigateur IE, nous devons donc encapsuler un événement de chargement compatible avec tous. La méthode peut être utilisée dans tous les navigateurs

L'inconvénient de cette méthode est qu'il faut connaître l'ordre de chargement des fichiers. 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 un script

équivaut en fait à créer une balise Avec une balise avec un script en ligne, une fois que l'élément nouvellement créé est ajouté à la page, le code est immédiatement exécuté et prêt à être utilisé.

Avantages : est le code js téléchargé mais ne l'exécute pas immédiatement. De cette façon, vous pouvez reporter l'exécution du script jusqu'à ce que vous soyez prêt. 🎜>

Inconvénients : Le fichier js doit être dans le même domaine que la page demandée. Le fichier js ne peut pas être téléchargé depuis 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 nécessaire à la dynamique, puis faites semblant d'initialiser le code restant de la page

[ Le téléchargement de l'image a échoué...( image-dd3f9-1515902024710)]

J'ai tellement présenté ci-dessus que j'aimerais recommander certaines 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 meilleure Oui, mais je ne l'ai jamais utilisée. Je n'expliquerai pas comment l'utiliser ici.

Résumé : Plusieurs aspects de l'amélioration des performances de js

1. Avant de fermer la balise, Déplacez toutes les balises vers le bas de 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 de la balise 🎜> 3.2 Utilisez des éléments créés dynamiquement pour télécharger et exécuter du code

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

Grâce à la stratégie ci-dessus, vous pouvez grandement améliorer ceux qui nécessitent une grande quantité Les performances réelles des applications Web js

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.