Chrome timeline - how can I determine the cause of a "Recalculate Style" log entry?

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?

score 27 · Answer 1 · answered Dec 27 '17 at 12:36

27

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.

answered Dec 27 '17 at 12:36

Knaģis

20,827
7
66
80

thanks, that helped me to track the redraws down to a css animation! – fabb May 07 '20 at 09:57
Hero! Helped me identify some hidden animations that I thought were not in the DOM. Thank you for silencing my computer fans :). – KieranDotCo Jun 25 '20 at 08:00
In my case, profiling did not reveal the source of the task. This "one neat trick" showed that it was a CSS mistake (in a large morass of CSS I had nothing to do with). Great diagnostic hack! – Ambrose Little Mar 09 '23 at 17:41

score 14 · Accepted Answer · answered May 16 '12 at 21:42

14

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.

answered May 16 '12 at 21:42

briangonzalez

1,606
16
21

24

That was a pretty helpful demo, but there are also "Recalculate Style" entries that don't show a stack trace and don't seem to be attached to any code. When there are a lot of elements I get that entry whenever I click, but haven't been able to trace why it needs to recalculate. – redbmk Jun 06 '12 at 16:44
1

I'm getting this originating from minor GC. So I guess good luck with figuring that out. – John Weisz Jul 22 '17 at 21:34
1

If the layout recalculation was triggered by a font having loaded, you can click on "reveal" link in your recalculate style, which will take you to the "Schedule Style Recalculation" and the only way to know it was due to font, is to look up to the network pane and the font's long bar will finish right above the SSR task. So use your intuition when fonts become available if they're loaded asynchronously. – zavr Sep 21 '19 at 02:06

score 7 · Answer 3 · answered Dec 08 '16 at 19:09

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.

The JQuery suggestion was incredibly helpful, because it allows for really rapid diagnosis. This quickly found the source of a problem for me – an animation with `animation-iteration: infinite` was consistently invalidating CSS and redrawing, even though the affected element wasn't on screen. — jpolitz, Jan 20 '17 at 05:43

score 5 · Answer 4 · answered Nov 14 '16 at 15:13

5

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

answered Nov 14 '16 at 15:13

Denis

2,429
5
33
61

score 1 · Answer 5 · answered Nov 05 '12 at 09:58

1

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

answered Nov 05 '12 at 09:58

jBoive

1,219
1
14
40

2

How did you found out, what was causing it – Rahul Prasad Nov 08 '14 at 05:45
1

It's more then two years ago, so excuse me if my memory is a bit vague. ;) But I think I just did a trial and error. Removed all the transitions and then added each one until I saw the problem. When I found just the class causing issues I limited the transition to the one single property I actually needed. More luck then anything else really... – jBoive Nov 08 '14 at 08:49

score 1 · Answer 6 · answered Sep 08 '21 at 15:10

1

It may also be caused by some extension. In my case style was recalculation because of an external third-party chrome extension. When I removed the extension - Chrome stopped recalculating styles.

answered Sep 08 '21 at 15:10

IMalaniak

170
1
9

score 1 · Answer 7 · answered Sep 01 '22 at 13:04

Chrome now (I don't know since how long) gives you 2 clickable links in the summary tab of style recalculation events.

Initiator will select the task that caused the recalculation in the timeline view.

First Invalidated is the first line that did something that triggered the recalculation. Clicking it will open the line in the sources tab.

At least for recalculations triggered by JavaScript running on the page. For some other events only the initiator is shown, or neither.

Chrome timeline - how can I determine the cause of a "Recalculate Style" log entry?

7 Answers7

Linked