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?

CodePudding user response：

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.

CodePudding user response：

My advice to you would be to use the

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.