9

I have large CSS rules which are mainly based on CSS3 transitions.

When I check the rendering time for a typical page with online tools like webpagetest.org or developer tools like firebug; the rendering time is extremely different in various browsers. For example, MSIE: 1.5s, Chrome:2.5, FireFox:47.0.

How can I debug which part of my CSS has caused unusual problem in FireFox?

Common tools like firebug only shows the total rendering time, and does not show which process (DOM and its CSS rule) is slow and blocking.

How to find the slow process in CSS rendering of FireFox?

Improve this question
10
  • You did verify this is indeed a reproducible issue? How about an example to reproduce and play with? Commented Nov 5, 2013 at 2:24
  • @nmaier I found the problem (repeated small backgrounds do not work in FF), but my question is general. I discovered the problem by trial and error, but there should be a more systematic method/tool for this purpose. Commented Nov 5, 2013 at 2:28
  • I'm just curious. Did you file a bug? If not, you probably should if there isn't one already. Commented Nov 5, 2013 at 2:42
  • @nmaier this is indeed a common bug of FF, as I found several bugs reported this issue in different ways. Commented Nov 5, 2013 at 4:28
  • 1
    @brandonjordan: Those are rendering times (in seconds), not version numbers. Commented Nov 11, 2013 at 14:39

1 Answer 1

Reset to default
5

No, unfortunately, we don't have anything much better than trial-and-error right now (see here). Chrome's native dev tools currently give us the most complete information about rendering and, from what I've heard, that's one of the most common requests they get.

As far as third party tools, ones that measure this at all are relatively rare. I knew of 2 in the past that I no longer use (http://ejohn.org/blog/browser-paint-events/ and http://www.browserscope.org/reflow/about). Mostly these help you know when repaints or reflows happen and estimate how long they take total.

However, CSS Paint Times and Profiling CSS for fun and profit mention ways to do profiling by property, but, if you look, neither is probably what you're hoping to see.

Is there a definitive way to measure "time to paint" for performance? and How to measure browser layout performance provide related information.

Also see http://jankfree.org/, which has up-to-date information and no links to a tool that automates the current trial-and-error approach.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.