CSS Performance Profiler

CSS Performance Profiler?

So, I finally got around to writing a JavaScript function that indexed all of my CSS classes on the page and then individually toggled them, while scrolling the page. This immediately pin-pointed the errant class, and from there, I was able to determine errant property. Turns out that border-radius on an element that contains many children (e.g. a body level div) performs incredibly poorly on IE9.

I've started a github repo for my CSS stress test: https://github.com/andyedinborough/stress-css

From there, you can install a bookmarklet to easily run the test on any page.

Debugging CSS animation performance on Firefox

As of Firefox 34, there's a profiler in the FirefoxDevTools:

The Profiler lets you record JavaScript function calls. You can find the profiler in the "performance" tab in the toolbox (make sure you have the "performance" checkbox enabled in the settings).

Once you created a record, you'll see a framerate graph along with a bar graph showing the types of activities that occurred on each recorded sample (network, JIT, GC, events, styles, graphics, storage). You can also enable the "Gecko platform data" in the settings so that you get more information in the JavaScript function calls stack about what the rendering engine spent time doing.

Since you're debugging a CSS related performance bottleneck, you'll mostly be interested in styles and graphics operations.
The profiler should hopefully help you narrow down to what JavaScript calls trigger these problems.
The framerate graph should also be quite useful to you.

The profiler makes use of the devtools protocol, so works on remote devices too.

Having said that, a tool like Chrome's timeline which shows restyles, reflows, paint, compositing operations as time goes would be more adapted to your use case. We are actually working on this tool right now, and there's an alpha version in Firefox Nightly (firefox 35 right now):

How to test browser performance of specific CSS property?

I could not find a single IE+CSS performance tool to cover ie7/ie6.

What I can tell you from my experience using .htc files, namely csspie...is that you want to look at it from a js perspective, not css.

Having said that, to test js performance on ie6/ie7, try these:

• DYNATRACE: http://ajax.dynatrace.com/pages/
• COMPANION JS: http://www.my-debugbar.com/wiki/CompanionJS/HomePage
• FIREBUG LITE: http://getfirebug.com/firebuglite
• DEBUG BAR: http://www.debugbar.com/

I'm afraid I can't be more specific given there's no 'sample' live file to work with provided in your original post. Hope this helps.

Regards
G

---

Related Topics