Chrome timeline - how can I determine the cause of

Question

Profiling a page with the built-in timeline recorder in Chrome, I see repeated "Recalculate Style" entries. They have no obvious information to link them to DOM element or event.

How can I best determine the cause of these entries?

Answer 1

I was able to test if CSS transitions or animations were triggering recalculations on my page. I used jQuery to do this, but you can use whatever you want:

$('*').css('transition', 'none');
$('*').css('animation', 'none');

This effectively disables transitions and animations on every element of your page. I ran them one at a time, and then reran my profiling. In my case, animations were the culprit.

.css('animation') will return something like

"myCustomAnimation 15s linear 0s infinite normal none running"

or if there is no animation,

"none 0s ease 0s 1 normal none running"

So after refreshing (to reenable the animations), the following snippet logs every element that has an animation defined:

$('*').each(function(){
  if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
    console.log(this);
  }
});

By disabling animations on each of those individually, I was able to determine which one was causing my issues.

Answer 2

I'm almost sure you have some infinite repeating animation on your page. That's what caused Recalculate Style without saying what caused it.

Answer 3

An alternative to the posted jQuery version for investigation is a simple one-liner in the console:

window.onanimationiteration = console.log;

This will print a line every time some animation runs, including the name of the animation and the element where the animation is applied to.

Answer 4

My advice to you would be to use the Chrome Canary build of Chrome. Paul Irish has a good demo of using the Timeline in Chrome Dev Tools here

You can simply click on the event, for instance 'Recalculate Style', and you should get a miniature stack trace pointing to where the event occurred in your code.

Answer 5

I just had the same problem (that's why I found your question).

My problem was cause by a CSS3 transition all property. I had been lazy, when all I needed was transition padding.

Implementing that single change made the loop