Une brève discussion sur le chargement de page js et les compétences en matière de méthodes d'analyse des performances_javascript

1. Chargement

Chargez d'abord le fichier js de référence de la page statique, puis vérifiez si le fichier de référence contient la fonction onload. Par exemple, main.js contient la fonction onload. Recherchez s'il existe des références à d'autres fichiers js dans main.js. . Chargez d'abord les fichiers js de référence, l'ordre de chargement des fichiers référencés est cohérent avec l'ordre de main.js.
Une fois le chargement terminé, la fonction onload commence à être exécutée. É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. Utiliser des outils d'analyse

Les outils de développement des principaux navigateurs (Firefox est mon préféré) peuvent facilement vérifier le temps de chargement et d'exécution de chaque fichier js, fichier html, fichier css et image.

2. Analyse du codage en dur

Dans la première étape, nous pouvons essentiellement localiser le fichier js du goulot d'étranglement, nous pouvons utiliser les instructions console.time('test') et console.Endtime('test') pour pincer les fonctions js et les blocs de code. . Obtenez le temps d'exécution. 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. . à.