• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013
 

Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013

on

  • 4,544 views

Google Chrome DevTools presentation about Memory and Rendering profiling on Open Academy 2013 (05.23).

Google Chrome DevTools presentation about Memory and Rendering profiling on Open Academy 2013 (05.23).

Statistics

Views

Total Views
4,544
Views on SlideShare
4,463
Embed Views
81

Actions

Likes
6
Downloads
28
Comments
0

3 Embeds 81

https://twitter.com 76
http://www.liyi.it 4
https://web.tweetdeck.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013 Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013 Presentation Transcript

    • Chrome DevToolsRendering & Memory profilingOpen Academy 2013 Mate Nadasdi - Ustream, Inc
    • WHY DO WE NEEDA DEVTOOL?
    • • Javascript is an interpreted language• HTML, CSS debugging have to happen in the browser• Logging, debugging network requests is essential• Source and the final output could be totally different• Performance optimization is becoming increasingly important,especially on mobile
    • Google is leading in new technologiesNative implementation and really fast supportCanary build deliver new features in really short intervalsDeep configuration possibilitesEarly experimental accessRendering / Memory Profiling 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
    • Rendering
    • Parsing (HTML, XML, CSS, Javascript)LayoutText and graphics renderingImage DecodingGPU interactionNetwork accessHardware accelerationWebkit / Blink rendering engineImage Source: HTML5Rocks
    • From source to display - The ordinary wayHTMLHTMLParserAttachmentCSS ParserStylesheetsLayoutShared bitmapDOM treeCSSOM treeRender ObjecttreeRender Layertreen..1
    • Layout (Reflow) & RepaintLayout (reflow):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 reflow, node geometricchange or style change.
    • Possible reflows & repaints• DOM actions (Add, Remove, Update DOM nodes)• Hide/show with display: none (reflow & 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 reflow too• offsetTop/Left/Right/Height• scrollTop/Left/Right/Height• clientTop/Left/Right/Height• getComputedStyle
    • Tips to minimize reflow & repaint• Try to minimize layout cost with smaller subtree modification• 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 reflows for you(DOM queries flush 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
    • Frames & Jank• 60 Hz = We have got 16.66 ms only! ( 60 Hz = 1 / ~0,016)• 60FPS is important, because 60Hz is average refresh rate of devices• Jank: every time you can’t create a frame when your screen refreshes• vSync - generating new frames only between screen refreshes• JavaScript timers fails because of inaccuracy and different frame rates• requestAnimationFrame is a good solution20ms 20ms 20ms 20ms 20ms 20ms 20msDisplay refresh at 60 hz:Our frame creation:
    • DEMO! Rock with timeline panel!Tips:• Show paint rectangles: Use it to show expensive paints• Show composited layer borders: Check your GPU compositing layers easily• Enable continuous page repainting: Easy to find the most expensive layers• chrome://tracing/: Detailed tracing system to track core functionalities• Use JavaScript CPU profile with Flame chart to diagnose your yellow pieces.
    • Memory profiling
    • Javascript memory basicsRoot object• Top of the memory management system• We cannot manipulate• References global variablesObject variable• Can reference other variablesScalar variable• number, boolean, etc
    • Object sizesShallow size• Memory held directly by the object• It can be significant 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 workflow 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 profiling experimentshttps://www.google.com/intl/en/chrome/browser/canary.html
    • Thank you!@matenadasdiSpecial thanks to Paul Irish and Addy Osmani for reviewing these slides.