Performances

Transcript

1. Performances Mazarine Digital - 2017
2. Chrome Analyzing Runtime Performance
3. “Memory leaks are a problem every developer has to face eventually. Even when working with memory-managed languages there are cases where memory can be leaked. Leaks are the cause of whole class of problems: slowdowns, crashes, high latency, and even problems with other applications.” @speyrott
4. Evaluate performance • Throttling • Rendering • Analyzing
5. Throttling • Network throttling (fast 3G, slow 3G, custom) • CPU throttling (4x/6x slowdown)
6. Rendering • Repaints / reflows • FPS
7. Back to school Repaints “A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.” Reflows “A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM”
8. What causes a reflow ? • Resizing the window • Changing the font • Adding or removing a stylesheet • Content changes, such as a user typing text in an input box • Activation of CSS pseudo classes such as :hover • Manipulating the class attribute • A script manipulating the DOM • Calculating offsetWidth and offsetHeight • Setting a property of the style attribute • ...
9. How prevent reflows ? • Change classes as low in the dom tree as possible • Avoid setting multiple inline styles • Apply animations with position fixed or absolute
10. Analyzing - Performance monitor • CPU usage • JS heap size • DOM Nodes • JS event listeners • Documents • Frames • Layouts / sec • Style recalcs / sec
11. Analyzing - Live monitoring
12. Analyzing - Live monitoring
13. Analyzing - Report Demo
14. Prevent memory leaks • Add destroy methods • Remove all event listeners created • Check Detached DOM tree • Unset variables to prevent references • Optimize loops • Cached DOM variables
15. Sources • https://developers.google.com/web/updates/2017/11/devtools-release-notes# perf-monitor • https://developers.google.com/web/tools/chrome-devtools/evaluate-performan ce/ • https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forc ed-synchronous-layouts • https://developers.google.com/web/tools/chrome-devtools/memory-problems/
16. Questions ?