Chrome DevTools Timeline's new Frame Mode

What people said

Recommends briangonzalez · 2012-05 · Stack Overflow · on “Chrome timeline - how can I determine the cause of a "Recalculate Style" log entry?”

My advice to you would be to use the Chrome Canary [LINK] build of Chrome. Paul Irish has a good demo of using the Timeline in Chrome Dev Tools here [this video] 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.

Recommends mrbinky3000 · 2012-07 · Stack Overflow · on “Slow Javascript touch events on Android”

Looking at your code, you should do some optimizing. Right off the bat, never use jQuery's $.each() to do loops. Also, every time you poll the left, top, width or height of something, you're causing the browser to stop what it's doing, repaint the entire screen, and fetch you the most accurate values. Store these values in javascript variables instead. Use google chrome's timeline feature to find and eliminate unecessary paints and reflows. Here are some helpful links: Nicholas C. Zakas Gives You Some Tips on avoiding Reflows. [LINK] Here is Zakas giving his presentation to Google programmers: [LINK] Paul Irish Speeds up a slow JavaScript in front of your eyes: [this video] Please note, at the ti

Recommends Nils · 2013-01 · Stack Overflow · on “How to debug Javascript process and animation?”

I would use the timeline->frames in Chrome. Paul Irish has a lot of great talks about this, here is one [this video] Also when doing animation do not use setTimeout/setInterval, the precision is not good enough. Instead use requestAnimationFrame. More information about requestAnimationFrame can be found here. [LINK] Edit: This talk by Paul is also really interesting regarding speed and debugging speed in the browser: [LINK] , and here is a quite recent discussing 2D transforms vs absolute positioning: [LINK]

Recommends nikoloza · 2015-09 · Stack Overflow · on “`scroll` eventListener gives big intervals between `window.scrollY`”

Thanks, guys for the support. It helped a lot. The solution was using requestAnimationFrame instead of scroll eventlistener . Explaining video here by Paul Irish: [this video]

Cites Zendy · 2012-05 · Stack Overflow · on “Questions about Request Animation Frame”

I'm trying to build a parallax site, which will move few elements while scrolling the site. But instead of using a scroll event listener I'm using requestAnimationFrame , after reading this post by Paul Irish [LINK] , and this video [this video] which said that scroll listener is a bit buggy. My questions are: It looks quite smooth in Chrome, but it's flickering badly in Firefox. Did I do something wrong here? Does my code actually taking up more resources than using normal scroll event listener ? I can hear my laptop fan blazing every time I'm playing with this code. My file is located at [LINK] , and please scroll to the bottom of the page to see the element that's being manipulated from javasc

Cites prauchfuss · 2012-07 · Stack Overflow · on “Questions about Request Animation Frame”

I think this answer is wrong... It's hard to say without the original site from the question, but it is often appropriate to implement request animation frame with a scroll operation. The scroll event fires somewhat randomly and you will get much smoother look and feel with requestAnimationFrame. See: [this video]