I was headed to the CSS and gpu talk by Colt McAnlis (#perfmatters on twitter)
CSS properties and their paint times aren’t free. Depending on what properties you use, you could end up with slow rendering speeds. Box shadows and border radius strokes are the slowest (1.09ms) per render. That is pretty crazy, and I didn’t realize that it could be that slow.
We’re mostly taking about CSS optimizations that can be used by using the gpu, CPU on chrome.
Kinds of Layering controls
– load time layer promotion: some elements get their own layer by default. (Ex canvas, plugins, video, I frame)
– assign time layer promotion: (translate z, rotatex/y/z)
– animations
– stacking context and relative scrolling
– Too many layers uses additional memory; and you fill up the gpu tile cache.
– chrome prepaints tiles that are visible and not yet visible.
Side note: Colt loves ducks, and is sad about losing his hair 😦
– large images resized take forever. The resized images aren’t cached in the gpu. Think more about this for mobile devices.
Tooling
– turn on show layer borders in devtools in chrome. It’ll help with translate z issues etc.
– use continuous paint mode to continuously paint the page to see
Takeaways
– gpu and layers helps with faster rendering
– too many layers is a bad idea
– CSS tags impact page loads and rendering
the agile admin 