Google is leading in new technologiesNative implementation and really fast supportCanary build deliver new features in really short intervalsDeep conﬁguration possibilitesEarly experimental accessRendering / Memory Proﬁling toolsWhy Google Chrome?
Red - Yellow - Blue?Chrome channels• Stable (Releases in every 6 weeks)• Beta (1 month before stable, weekly releases)• Dev (twice weekly)• Canary (daily)Chromium
From source to display - The ordinary wayHTMLHTMLParserAttachmentCSS ParserStylesheetsLayoutShared bitmapDOM treeCSSOM treeRender ObjecttreeRender Layertreen..1
Layout (Reﬂow) & RepaintLayout (reﬂow):Parts of the render tree needs to be revalidated and node dimensions should berecalculated.Repaint:Some part of the screen needs to be updated because of a reﬂow, node geometricchange or style change.
Possible reﬂows & repaints• DOM actions (Add, Remove, Update DOM nodes)• Hide/show with display: none (reﬂow & repaint)• Hide/show with visibility: hidden (repaint only because of no geometric change)• Adding stylesheet dynamically• scrolling, resizing the window• DOM queries can cause a reﬂow too• offsetTop/Left/Right/Height• scrollTop/Left/Right/Height• clientTop/Left/Right/Height• getComputedStyle
Tips to minimize reﬂow & repaint• Try to minimize layout cost with smaller subtree modiﬁcation• Detach DOM nodes before huge manipulation• Do not change styles one by one (use classes instead)• Group DOM read and write actions to let the browser optimize reﬂows for you(DOM queries ﬂush the browser’s queue of changes)• Cache queried values, do not query them in every case you use it
Compositing, You Are Welcome!• There are more GraphicContexts• New tree in our forest, Graphic Layer tree• Composited RenderLayers get their own backing surface• Upload painted bitmaps to the GPU as textures• 256x256 tiles• Different thread for compositing• Much cheaper then paint
Object sizesShallow size• Memory held directly by the object• It can be signiﬁcant for arrays and stringsRetained size• Indirect memory hold• A size what will be freed if the object will be terminated• For primitive types retained size equals shallow size
Object’s retaining treeRootAGCDBHD object’s retaining tree is a graph, where paths are retaining paths from GC root to A.
GarbageGarbage:Variables wich are unreachable from the GC root nodeGarbage collection:Finds all garbages and frees it’s memory to the systemLeak:Object that still has retaining path accidently
Possible leaks• Closures• Deleting DOM nodes without removing event handlers• DOM could hold event listeners to objects wich are inactive already• Cycles: two objects reference to each other when they retain each other
DevTools workﬂow tips1. Search for possible memory leaks with timeline panel2. Use heap snapshots to capture object graph3. Use all four views of the snapshot panel:• Summary: An overview of our heap grouped by constructor name• Comparison: Compare two snapshots• Containment: Structured view of object graph• Dominators: Find the most dominant points of the heap4. Use the new Object Allocation Tracker in DevTools experiments“Memory Lane with Gmail” talk about this new tool on Google IO 2013https://developers.google.com/events/io/sessions/325547004
DEMO!Tips:• Check counters during your interaction on the examined page• Use GC force button to see how it impacts on your memory• Use it in incognito window, because extension allocated memory will be listed too• Ignore:• line in parentheses• lines in light gray• GC collects garbage before snapshot execution
Use Google Canary as it has all the features I have shownand more including lots of proﬁling experimentshttps://www.google.com/intl/en/chrome/browser/canary.html
Thank you!@matenadasdiSpecial thanks to Paul Irish and Addy Osmani for reviewing these slides.
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.