Advanced performance tooling in Chrome DevTools - Paul Irish @ Velocity 2014
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about measuring slow JavaScript, GPU-friendly CSS rendering, and what Chrome's Recalculate Style events mean.
Recommended by 2 people across 2 different months, 2014 to 2017.
What it is
A conference talk by Chrome developer advocate Paul Irish at Velocity 2014 on using Chrome DevTools to profile web performance. It covers the Timeline view, rendering and paint costs, and how to spot slow style recalculation and layout.
What people said
Recommends bwitkowicz · 2014-12 · Stack Overflow · on “Measure what part of a loop that is slow?”
Since you are using Chrome you shoud check out the Timeline tab in your browsers DevTools - just hit the record button before running the loop and stop it once it's done. You will se a nice breakdown of everything that just happened and you will be mostly interested in yellow bars - they show JavaScript operations. Please check out this video presentation by Paul Irish about Performance Tooling [this video] As you know, in Chrome or Firefox you can just wrap a piece of code with console.time (and console.timeEnd) and it will measure the speed of particular operation and print it in the console. For example: to measure the time it takes for an entire loop to execute use: console.time('For loop ben
Recommends Rodrigo · 2016-03 · Stack Overflow · on “How to apply CSS3 rendering for optimal performance”
As Terry mentions, using the transform matrix will make the browser pass that to the GPU, but you also need to be careful about it. Normally desktops and laptops handle this very good (unless you're passing big images, huge SVG's or a lot of them at the same time, in that scenario there's not much any normal GPU in a computer/device can do), but devices still do have less powerful hardware so don't use too much. Finally using translate properties instead of left and top for example, do increase browser performance since rendering is done in the GPU. If you're interested in JS animation, a solid choice would be using Greensock [LINK] since it has the ability to create a GPU layer and then rem
Cites Tim Arney · 2017-01 · Stack Overflow · on “What is involved in Chrome's Recalculate Style Event?”
Recalculate Style Get all the style rules Evaluate the selectors and match against the DOM Calculate the computed style for every element Basically anytime you change a classname or other operations like that. References [this video] [LINK]