Quelle est la cause de cet avertissement sur Safari? "Cette page Web consomme beaucoup d'énergie. Sa fermeture pourrait améliorer la réactivité de votre Mac"
Nous avons un site Web React fonctionnant avec de nombreuses images de haute qualité qui a connu cet avertissement. Comment commencez-vous à déboguer ce message d’avertissement sur Safari? Y at-il des choses spécifiques qui causent ceci?
Ce message est dû au processus de surveillance Safari qui surveille les scripts Javascript s'exécutant sur une page. Il est là pour informer l'utilisateur lorsqu'un script utilise trop de ressources. Lorsque votre page est chargée sur mon ordinateur, l'utilisation du processeur atteint 68%. Soyez fatigué des boucles et du code de rendu personnalisé.
Notes d'amélioration:
Rendre le code de rendu aussi efficace que possible.
Combinez les fichiers Javascript internes dans un seul fichier, au lieu de 7 fichiers. Amélioration majeure.
Lorsque cela est possible (pour des raisons de licence et de mise à jour), incluez les 9 scripts externes dans le fichier unique indiqué ci-dessus. Amélioration mineure.
Fractionnez la page principale en différentes sections, soit en pages séparées, soit chargées dynamiquement avec AJAX. Amélioration majeure.
Évitez les fichiers svg. Les fichiers SVG nécessitent beaucoup de puissance de calcul pour être tramés et affichés. C'est la cause principale des temps de chargement de 7 secondes. Convertissez les fichiers au format png avec la résolution d’affichage maximale attendue et proposez un fichier SVG élargi si vous souhaitez plus de détails (par clic ou retard de souris). Amélioration majeure.
Le nombre d'images n'est pas le problème. C'est le nombre d'images SVG (en charge) et les scripts à l'origine du problème.
Ouvrez la page dans Chrome, ouvrez les outils de développement, puis passez à l'onglet "Performances".
Ensuite, utilisez la 2ème icône à gauche - celle qui ressemble à un bouton "recharger". Ce qui dit "Démarrer le profilage et recharger la page".
Vous aurez un aperçu complet sur ce qui prend combien. Vous pouvez voir en haut ce qui consomme des FPS et du CPU, puis vous pouvez sélectionner les plages horaires qui ont eu une charge particulièrement élevée.
Dans la partie inférieure, sélectionnez ensuite les onglets "Arbre des appels" ou "Ascendant", pour obtenir un aperçu des scripts et des appels de fonctions qui posent des problèmes de performances.
Habituellement, les sites Web "normaux" (par exemple, pas les jeux) n’auraient pas beaucoup de mises à jour du cadre. Vous pouvez ensuite repérer, par exemple, si les disques de chargement sont animés avec JavaScript, au lieu de transformations et de transitions; et parfois ils refont le rendu bien qu'ils soient hors de portée.
Sur une note spécifique à React: Il peut également être judicieux de l'inspecter en plus avec React Developer Tools . Par exemple. vous pourrez peut-être voir si les sous-images refaisent constamment le rendu sans raison.