Last week, Facebook engineers came over for a mini-summit entitled Timeline Timeline
where we talked about how the Chrome DevTools' timeline can help improve the Facebook Timeline and vice versa.
Some notes I took:
● When figuring out how to speed up the CSS of a site, you need to identify % of time goes to selector matching, style recalculation, reflow and repaint. DevTools Timeline and Speed Tracer can help here.
● Worried about paint? Toggle off an element’s painting with visibility:hidden and try then.
● Worried about reflow? Take it out of the render tree with display:none
● Use requestAnimationFrame to measure FPS
● You can try out “Threaded compositing” in about:flags for iOS-like scrolling.
● Fixed background images are very costly to framerate.
● Chrome lazily decodes images from JPG, etc. Client scaling of images is expensive as it keeps both the original decoded image in memory and the new scale. This can force other images to be evicted from memory which means another re-decoding later on. Chrome Task Manager can watch your image cache numbers: if the image memory consumption is mostly the same while you’re seeing new images, then you’re probably evicting old ones.
● performance.webkitNow() landed in Chrome and is a big deal: High resolution timing (nanosecond and beyond)
● A potential way to track memory leaks of DOM nodes is holding element refrences with WeakMaps, run a setTimeout to give some time after “deleting” some DOM and see if the WeakMaps still retain a reference. If so, you probably have a memory leak.
● It’d be fun to have a contest: You have 1 div and 500 bytes. Make the slowest painting page.
In the photo (L to R): +Nate Chapin +Burak Guzel +Nat Duca +Paul Irish +James Ide +Lior Abraham +James R
(and +Steven Young
behind the camera)