DevTools: State Of The Union 2015

As the complexity of the web apps you build keeps moving, so do the Chrome DevTools. In DevTools State of the Union, Addy will give you the latest update on your favourite companion; exploring new features like paint profiling, animation inspection and updates to the JavaScript editing workflow with V8.

* Note: these are annotated slides aimed at making it easy to read and follow along with what I said during the session. The video will cover demos and the original unannotated deck.

Session: http://jqueryuk.com/2015/talks.php#addyosmani
Video: http://jqueryuk.com/2015/videos.php?s=devtools-state-of-the-union

Note: This deck and all content included are licensed under a CC0 license. Use whatever you need!

Transcript

1. State Of The Union DevTools jQuery UK, 2015 @addyosmani
2. Network Improvements DevTools: State Of The Union March, 2015. Agenda Performance Case Study Whirlwind tour of new features
3. DevTools: State Of The Union Performance Matters Challenges: Network, Paint, Layout, Recalc Styles Our users have better experiences when the web is fast. This is why speed is one of the major factors in ranking.
4. We think pages should be rendered in under one second and hit 60fps for animations and transitions. To help frame how you should think about performance this year, here’s a new model that’s useful to consider...
5. DevTools: State Of The Union Image credits: GestureWorks, Timothy Miller, Last Call Media Inc. 100ms User interacts with app UI causing state change. Response 2015 Web Performance Model 6ms Animations and transitions, either autonomous or user- initiated. Animation 50ms App UI is in a stable state, awaiting user interaction. Idle 1000ms Time from app start to appearing ready for use. Load
6. DevTools: State Of The Union Learn more in “Making a silky smooth web” by Paul Lewis time finger down finger up do idle/cleanup in 50ms chunks in case finger down happens again animation Max: 100ms loading 1000ms 60fps. max 6ms chunks Read more: http://bit.ly/blink-midnight-train 2015 Web Performance Budget
7. Today we’ll look at how the DevTools have evolved to better visualise slowness in your pages.
8. New in Network Panel 1. What’s new? Chrome 42+
9. WebPageTest vs DevTools in Chrome 41 Chrome 41 had only two times: receive time & “everything else”. WebPageTest (top) color coded timing information. So much better.
10. What if this could be improved?
11. Update! Load timing is now more visible. New: Waterfall bars now show where time was spent!
12. DevTools: State Of The Union Hover over bars for more detailed timing breakdown Load event fired DOMContentLoaded event fired
13. DevTools: State Of The Union Details pane now docks to bottom when in Dock-to-right mode.
14. DevTools: State Of The Union Right-click to open Network files in Sources
15. DevTools: State Of The Union See what initiated a request. Now supports iframes (Other)
16. DevTools: State Of The Union Network protocol column (visualise use of HTTP/2, SPDY etc)
17. DevTools: State Of The Union Filter by method: GET/POST
18. DevTools: State Of The Union Filter by domain:
19. DevTools: State Of The Union Filter by mime-type:
20. DevTools: State Of The Union Negative text filters! Exclude matches from results:
21. DevTools: State Of The Union Preserve Log - navigations can keep adding to current waterfall
22. DevTools: State Of The Union Tip: Toggle columns displayed in the Network Panel
23. DevTools: State Of The Union Replay XHR can now replay with credentials, cookies & all. XMLHttpRequest. withCredentials is a boolean that indicates whether or not cross- site Access-Control requests should be made using credentials such as cookies or authorization headers. The default is false.
24. DevTools: State Of The Union Emulate spotty network connections in Device Mode!
25. DevTools: State Of The Union Pro-tip: Click/hold Reload to empty cache & do a hard reload Normal Reload performs a standard refresh but tries to use the cache where possible. Hard Reload re-fetches everything. Empty Cache and Hard Reload completely empties local cache before re-fetching everything.
26. Performance Case Study 2. Wikipedia
27. Lately, the DevTools team have been diving in to performance audits of popular sites. Wikipedia was one of the first.
29. Specifically, they were looking at the performance of the Wikimedia visual editor. This one..
31. It turns out using jQuery for toggling visibility was their major performance bottleneck. This totally surprised them. Off the back of this, Paul shared a recommendation..
33. The advice was really saying, don’t use hide(), toggle(), : visible, or :hidden because under the hood they’ll call getComputedStyle() before setting any inline styles. This forces costly style recalculations. Before we continue, Paul wanted to say..
34. Tools Not Rules Paul’s sorry DevTools “Sorry everyone!”
35. He kinda broke one rule of performance profiling - Tools not Rules :) So, let’s try to justify his recommendations by digging into our tools.
36. Measurement time! Let’s start by enabling two new options - Causes & JS Profiler
38. JS Sampling JS Profiler integrates JavaScript Sampling in Timeline! Get charts of JS execution time, call stacks visualised next to paint & layout. This is a game changer.
39. The new Causes option can be enabled in the DevTools Timeline. Causes explains what’s happening in Timeline. Useful for seeing what caused layout invalidations, recalc styles & forced layout.
40. Timeline for Wikipedia Editor on first load took ~20 seconds!
41. Let’s break this into ~ 3 Acts of work.
42. Act 1
43. Wikipedia has an edit notice system. They wrote a jQuery plugin ($.getVisibleText) to determine if a notice was visually empty. They then filter out notices based on this check. Editor Notices Edit Notice System on Wikipedia.com
44. This causes some hefty recalc styles because the plugin relies on the :hidden selector behind the scenes...
45. Heavy ~120ms Recalc style
46. :hidden use in their jQuery plugin Jump to source from Timeline records Source for their $.getVisibleText plugin Pretty print optimised source so we can read it
47. Problem Too much magic in :hidden & the other visibility utilities. :hidden isn’t part of the CSS spec. In addition, jQuery can’t take advantage of perf boosts from using qSA().
48. Let’s see how Wikipedia are using their plugin in practice.
50. For jQuery’s :hidden, an element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn’t really taken into account. Notice the use of offsetWidth/offsetHeight. Reading these properties can cause costly layout (reflow) in the browser.
51. https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
52. Advice Don’t trust :hidden. Use your own logic to compute visibility. element.hidden is just one option.
53. Let’s look at another really expensive block and the source of the parent function behind it..
56. Looks straight-forward, right? We assume .children() requires getting childNodes and running matchesSelector() on each of them. But, there’s actually a lot more being done here. Let’s go back to our Timeline.
58. The blue parseHTML bits at the bottom of those flames is Sizzle’s code for handling qSA() regex. It’s weird that we’re hitting it every single time. Digging deeper, this is actually due to a bug in Sizzle where setDocument is called and expensive processing is performed each time jQuery is used on a document that isn’t window. document. The jQuery team are exploring this at the time of publishing.
59. Wikipedia ended up dropping their use of jQuery children():
60. Advice Be careful with .children(). Also just use querySelectorAll() & DOM methods where you can.
61. Another thing we noticed was the editor had a particularly gnarly DOM size. It was pretty huge across the board.
62. Large DOM Node Count DOM size is an issue here > 14,000 Elements! Crazy.
63. Advice Kill any superfluous spans/divs you don't absolutely need. When you have serious recalc style issues, try keeping your DOM element count under 1000 for more predictable performance.
64. Act 2
65. Next we’re going to jump into the JavaScript CPU profiler.
68. This one method oo.copy() is doing a LOT of JS work. They actually used jQuery.html() quite a lot behind the scenes. Wikipedia are working on eliminating all their .html() calls, but we can look at just one instance of them fixing this up..
70. Advice Avoid $(elem).html(str) for DOM insertion, use innerHTML or DOM methods. They’re massively faster. Batch. Don’t stamp out HTML into DOM a ton of times. Just use innerHTML once.
71. Let’s look at our CPU profile some more.
73. Crazy. createSurface() calls are taking a HUGE amount of time. 1/3rd of our editor initialisation is spent here. We’ve also got some pretty hefty recalc styles for the method, taking > 100ms.
75. If you look at the source, they’re using the .css() method to set visibility and remove hidden classes.
77. This leads us to our largest bottleneck in the entire editor...
78. Our largest bottleneck curCSS!
79. It’s got the heaviest self-time stack of JS during editor load, coming from one jQuery curCSS call of ~319ms. Almost all of this work is coming from .hide() and .show(). In fact, this is littered throughout our traces.
80. 100ms recalc styles. Lots of $(elem).hide(), $(elem).css(prop)
81. If curCSS sounds familiar, it’s because you’ll see it when digging into the source for jQuery’s .css() method. If a computed value exists for an element, it’ll use curCSS to go and set your styles.
83. Wikipedia were very surprised when they learned .hide() was their biggest bottleneck. Their usage of it was pretty atypical for jQuery code.
84. Their usage
85. Unfortunately, there’s a lot more magic going on here. jQuery is calling getComputedStyle() before setting any inline styles for visibility. That isn’t a good call & is a good way to cause layout. They do it to support two edge-cases: display:none & inline styles that you might want to use with .show()/.hide(). jQuery are exploring optimisations for these issues at the time of publishing.
86. Advice Don’t use .hide() for high performance visibility toggling. Use el.hidden = true/false or add/remove/toggle class.
87. Act 3
88. 140ms recalcs on .show/.hide() DevTools: State Of The Union More visibility toggling slowness Lots more jQuery.html(str) 300ms recalcs in $.fn.animate()
89. Overall advice If you think it’s slow, profile it. I’m not saying don’t use jQuery. I’m saying understand how your abstractions work. Know where your bottlenecks are.
90. Summary jQuery is not your friend for high-performance visibility toggling Track visibility on your own rather than using :hidden, :visible, .show(), .hide() Avoid $(elem).html(str) for DOM insertion. Use innerHTML or DOM methods. jQuery does a lot of magic around querySelectorAll. Use it on its own if possible. Keep your DOM size low for predictable performance Try to touch the DOM less. Batch changes. Mutations just make things harder. DevTools: State Of The Union Wikipedia Case Study
91. DevTools: State Of The Union SFGate.com ..and It’s not just Wikipedia! For more case studies, keep an eye on Paul Irish’s blog!
92. Grab bag of tips 3. Chrome 42+
93. DevTools: State Of The Union New Eye Dropper in the Element panel Color Picker!
94. DevTools: State Of The Union New! We now highlight DOM updates. Visualise what parts of a node have changed with ease:
95. DevTools: State Of The Union New Cubic Bezier Function Editor! With preconfigured bezier functions!
96. DevTools: State Of The Union Timeline: Check “Paint” for graphics layer insights
97. DevTools: State Of The Union Timeline: New Layers panel for advanced profiling
98. DevTools: State Of The Union 3D view for visualising composited layer stacking
99. DevTools: State Of The Union Inspect individual layers with ease
100. DevTools: State Of The Union • What Layers were created? • What were the reasons for compositing? • Why does an element have those dimensions? • See memory estimates Layers are those portions of a page uploaded to the GPU for compositing. Layers: dive into reasons for compositing, memory, slowness.
101. DevTools: State Of The Union New Paint Profiler! See draw calls executed to draw pages
102. DevTools: State Of The Union New! Web Animation playback: Playback and speed controls for controlling animation. Slow motion. Pause.
103. DevTools: State Of The Union Animation Inspector (coming soon!) In Experiments at the time of publishing
104. DevTools: State Of The Union Console: Inspecting an object? Right-click functions to jump to their definition in your source code
105. DevTools: State Of The Union New editing features in the Sources Panel! Multiple cursor support Autocompletion Column selection Ctrl + M to jump between matching brackets
106. DevTools: State Of The Union V8 Proactive Compilation - spot errors in your source earlier
107. DevTools: State Of The Union Save Console Messages to a Text file
108. DevTools: State Of The Union New! Goodbye “undefined is not a function” Undefined method names now inform us which object they were called on. We’ve got callsite awareness! Rather than just “undefined” in this example we get foo.bar.
109. DevTools: State Of The Union Stepping through apps that use a Framework is hard. Usually end up stepping into the Framework :(
110. DevTools: State Of The Union JavaScript Framework Blackboxing fixes that. Right click on a Framework/Library script to blackbox..and..
111. DevTools: State Of The Union BOOM. When stepping in/out/over, DevTools now bypasses the library code! Just debug your own sources. • Exceptions thrown from library code will not pause • Stepping into/out/over bypasses the library code • Event listener breakpoints don't break in library code • The debugger will not pause on any breakpoints set in library code.
112. DevTools: State Of The Union Pre-configure frameworks to blackbox from Settings
113. DevTools: State Of The Union New Promises Inspector (coming soon!) In Experiments at the time of publishing
114. DevTools: State Of The Union Filter by Pending, Fulfilled, Rejected Promises with ease
115. DevTools: State Of The Union Click-to-jump to where a Promise was defined:
116. DevTools: State Of The Union Promises Inspector also supports Async call stacks! Enable Async call stack traces
117. We hope you’ve found this preview of what’s new in the DevTools useful. There’s a lot more to come!
118. devtools.chrome.com See our latest
119. See Making a silky smooth web by Paul Lewis at SmashingConf Want a deep dive on the 2015 Performance Model?
120. See DevTools for designers & talk to us about your ideas Designer?
121. console.thanks() +AddyOsmani @addyosmani