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

google-chrome profiling timeline
Ben Aston picture Ben Aston · Jan 18, 2012 · Viewed 24.5k times · Source

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

briangonzalez picture briangonzalez · May 16, 2012

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.

Related questions

Difference between 'self' and 'total' in Chrome CPU Profile of JS

What is the difference between the 'self' and 'total' columns in the Chrome CPU profiling of JS code?

Read More
Disable same origin policy in Chrome

Is there any way to disable the Same-origin policy on Google's Chrome browser?

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More