Long frame debugging in chrome devtools timeline
I am having trouble debugging my javascript performance in chrome devtools. I am doing some heavy animations, and I encountered something I don't understand in my timeline (while running some animations).
I marked click events with red circles. The blue squares with green 'animation' written on them are animations (what a surprise). And the red square is where I have my problem.
It takes between 300-400 ms, and happens after the animation ends. The call stack is nearly empty, and I am no devtools expert. Is there something obvious going on, that I don't see?
Also, if I wait a little longer the animations runs smoother, and those red long frames are gone.
In the project I use Backbone, underscore, jQuery and TweenMax for animations.
Judging from how your Timeline panel looks I'm guessing you are using older version of Chrome. Please update to v57. There was a bug in previous versions where expected delay between animations was marked red (long frame). See this report.
Chrome 52:
Chrome 57:
- How can I find out if a javascript iterator terminates early?
- Renaming Function Parameters with Babel Without Changing Other Identical Identifiers
- How to find npm duplicate packages?
- Color gradient as style on marker
- How to fill the whole canvas with specific color?
- Change onclick action with a Javascript function
- Change onClick attribute with javascript
- JavaScript shuffle elements but track original index or use modulus to insert them into parent markup
- Parsing nested stringified json objects
- Gantt editable chart for ReactJs
- Pug is not correctly generating the HTML even with the correct pug indentation
- Chai/Node.js: Expect(value).to.be.NaN issue
- Why using toRef(props) and is it good idea to change their value in CompositionAPI?
- How to set document's title per page?
- How to rotate and fade background images in and out with javascript/ASP.NET/CSS
- Bootstrap collapse all accordions on button click
- Why does my Shadow DOM button (tabindex="0") get focus after the regular button (tabindex="10") and how can I fix it?
- Why do CDN links work for some versions but not others? NS_ERROR_CORRUPTED_CONTENT
- Creating a Blob from a base64 string in JavaScript
- How to add a watermark to a canvas that already has an image?
- How to detect ECMAscript version?
- Difference between useRef vs document.getElementById to focus an input
- Is it possible for an old-style class to inherit from an ECMAScript 6 class in JavaScript?
- How to update "updatedAt" manually?
- How to measure time taken by a function to execute
- How to have a link that has a product id in it
- Using ContextApi in SvelteKit in +page.server.ts
- Is it good practice to manipulate DOM in ReactJS?
- How to use Posthog to capture pageview events with React Router?
- PHP response triggers HEX view in Edge debugger