Introduction au chargement de pages js et aux méthodes d'analyse des performances_compétences javascript

1. Charger

Chargez d'abord le fichier js référencé de la page statique, puis vérifiez si le fichier référencé contient la fonction onload. Par exemple, main.js contient la fonction onload. il existe des références à d'autres fichiers js. Pour les références, les fichiers js référencés sont chargés en premier et l'ordre de chargement des fichiers référencés est cohérent avec l'ordre de main.js.
Une fois le chargement terminé, commencez à exécuter la fonction onload. Étant donné que la séquence d'exécution de js est séquentielle, afin d'améliorer la vitesse de réponse de la page, l'approche générale consiste à dessiner la page uniquement lors du chargement, et certaines fonctions de liaison d'événements, méthodes ajax, etc. peuvent être écrites ultérieurement.

2. Analyse de la vitesse de réponse

1. Analyser à l'aide d'outils
Les outils de développement des principaux navigateurs (j'aime le plus utiliser Firefox) peuvent facilement visualiser chaque fichier js et html. fichier, temps de chargement et d’exécution des fichiers CSS et des images.

2. Analyse du codage en dur
Dans la première étape, nous pouvons essentiellement localiser le fichier js du goulot d'étranglement, vous pouvez utiliser console.time('test') et console.Endtime('. test') réduit le temps d'exécution des fonctions js et des blocs de code. Cependant, l'instruction console n'est valide que lorsqu'elle est exécutée dans des navigateurs non-IE, et une erreur sera signalée sous IE. Si vous préférez utiliser IE, utilisez des horodatages. Lors du pincement, la méthode la plus pratique consiste à pincer directement l'intégralité du fichier js, puis à utiliser le navigateur Firefox. Appuyez sur F12 pour voir la consommation de temps de toutes les fonctions et blocs de code dans le js cible dans la console, et vous pourrez localiser le code du goulot d'étranglement. . à.