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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Googlebot
  • 15,159
  • 44
  • 133
  • 229
  • You did verify this is indeed a reproducible issue? How about an example to reproduce and play with? – nmaier Nov 05 '13 at 02: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. – Googlebot Nov 05 '13 at 02:28
  • I'm just curious. Did you [file a bug](https://bugzilla.mozilla.org/enter_bug.cgi)? If not, you probably should if there isn't one already. – nmaier Nov 05 '13 at 02:42
  • @nmaier this is indeed a common bug of FF, as I found several bugs reported this issue in different ways. – Googlebot Nov 05 '13 at 04:28
  • Do u use -moz-transition ? –  Nov 05 '13 at 19:52
  • @DOCTYPEHTML yes, FF has problem with small repeated background. – Googlebot Nov 05 '13 at 21:54
  • I dont understand the question, i do rather mitging say. –  Nov 06 '13 at 13:57
  • @DOCTYPEHTML imagine that you have 10 gradients in CSS rules. Common tools say how long it takes for browser to render all gradients, but how to find how much each gradient takes to be rendered. When you have a slow rendering, this can help to find which rule is slowing down the page rendering. – Googlebot Nov 06 '13 at 23:04
  • just a question.. why chrome 2 and IE 1? IE is at 11 now and chrome is at 30. – electrikmilk Nov 11 '13 at 13:32
  • 1
    @brandonjordan: Those are rendering times (in seconds), not version numbers. – BoltClock Nov 11 '13 at 14:39

1 Answers1

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.

Community
  • 1
  • 1
morewry
  • 4,320
  • 3
  • 35
  • 35