CSS Performance Profiler?

Je travaille actuellement sur un site, et quelque part dans ma masse de feuilles de style, quelque chose tue les performances dans IE. Existe-t-il de bons profileurs CSS? Je voudrais un outil capable de repérer les règles qui détruisent les performances.

Avant de vous demander, j’ai désactivé les règles JavaScript, l’opacité et les zones d’ombre / ombre de texte. La page est toujours nerveuse. : / Si je désactive tout le CSS, il fonctionne très bien.

J’ai besoin d’un outil qui peut profiler la page et signaler où se trouvent les goulots d’étranglement CSS.

    J’ai donc fini par écrire une fonction JavaScript qui indexait toutes mes classes CSS sur la page, puis les basculait individuellement tout en faisant défiler la page. Cela a immédiatement mis en évidence la classe errante, et à partir de là, j’ai pu déterminer une propriété errante. Il s’avère que le paramètre border-radius sur un élément qui contient de nombreux enfants (par exemple, un div niveau du corps) fonctionne très peu sur IE9.

    J’ai commencé un repo github pour mon test de résistance CSS: https://github.com/andyedinborough/stress-css

    De là, vous pouvez installer un bookmarklet pour exécuter facilement le test sur n’importe quelle page.

    Le plugin Page Speed de Google comporte une section qui parsing votre CSS et vous informe des sélecteurs inefficaces, peut-être commencer par là?

    hth

    Note: Je sais que c’est un plugin Firefox, mais devrait vous aider à optimiser un peu 🙂

    Hmm, jamais entendu parler d’un tel outil.

    Si vous n’en trouvez pas, les choses à surveiller manuellement incluront

    • Toute instruction de filter ( alpha=opacity classique alpha=opacity et autres – IE possède un certain nombre de filtres graphiques très avancés extrêmement coûteux)

    • D’énormes éléments (comme des milliers de pixels)

    • D’énormes images de fond – peut-être les supprimer toutes un moment?

    Je soupçonnerais fortement le premier point – les transparences alpha peuvent être un terrible goulot d’étranglement, en particulier sur les anciens systèmes.

    J’ai aussi des problèmes de performance sur un projet Web sur lequel je travaille actuellement. Il fonctionne bien dans Firefox, Chrome, même IE8. Dans IE9 il s’embrouille.

    Après un certain travail de détective, j’ai découvert que l’élimination de toutes les lignes CSS de type box-shadow améliorait considérablement les performances. J’avais des ombres de bannières, de tableaux, de boîtes et d’tabs, chacune avec juste une quantité subtile d’ombre et de flou, mais apparemment assez pour qu’IE9 devienne de mauvaise humeur.

    Les outils de développement Chrome contenaient un CSS Selector Profiler pour faire ce genre de chose. Vous pouvez voir des captures d’écran de celui-ci dans cet article de blog .

    L’équipe Chrome a sorti la fonctionnalité de Chrome 30 en indiquant que:

    La sélection de sélecteurs CSS est maintenant relativement rapide pour la majorité absolue des sélecteurs courants qui étaient lents au moment de l’implémentation du profileur. Cette heure est également incluse dans l’événement “Recalculer le style” de la chronologie.

    En tant que tel, je pense que le profileur de sélecteur CSS n’est pas aussi utile qu’il [peut avoir été] utilisé et peut être supprimé en toute sécurité. Cela permettra également de réduire la fraction de développeurs essayant de micro-optimiser des sélecteurs déjà rapides.

    Vous pouvez essayer d’utiliser une ancienne version de Chrome pour résoudre le problème, mais je vous recommande de consulter l’ onglet Timeline de la version actuelle des outils de développement Chrome. la performance du sélecteur est affectée), la mise en page et la peinture de la page.

    Opera expérimente le profilage CSS dans son profileur.

    Il peut être activé en suivant les étapes de cette page . Ouvrez ensuite l’éditeur de profil, démarrez le profilage et actualisez la page que vous souhaitez parsingr. Arrêtez le profilage après le rendu, puis les résultats seront affichés.