DevTools: State Of The Union 2015

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!

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

March 17, 2015
Tweet

Transcript

  1. 2.

    Network Improvements DevTools: State Of The Union March, 2015. Agenda

    Performance Case Study Whirlwind tour of new features
  2. 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.
  3. 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...
  4. 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
  5. 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
  6. 7.

    Today we’ll look at how the DevTools have evolved to

    better visualise slowness in your pages.
  7. 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.
  8. 12.

    DevTools: State Of The Union Hover over bars for more

    detailed timing breakdown Load event fired DOMContentLoaded event fired
  9. 13.

    DevTools: State Of The Union Details pane now docks to

    bottom when in Dock-to-right mode.
  10. 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.
  11. 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.
  12. 27.

    Lately, the DevTools team have been diving in to performance

    audits of popular sites. Wikipedia was one of the first.
  13. 28.
  14. 30.
  15. 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..
  16. 32.
  17. 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..
  18. 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.
  19. 37.
  20. 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.
  21. 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.
  22. 42.
  23. 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
  24. 44.

    This causes some hefty recalc styles because the plugin relies

    on the :hidden selector behind the scenes...
  25. 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
  26. 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().
  27. 49.
  28. 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.
  29. 52.

    Advice Don’t trust :hidden. Use your own logic to compute

    visibility. element.hidden is just one option.
  30. 53.
  31. 54.
  32. 55.
  33. 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.
  34. 57.
  35. 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.
  36. 61.

    Another thing we noticed was the editor had a particularly

    gnarly DOM size. It was pretty huge across the board.
  37. 62.
  38. 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.
  39. 64.
  40. 66.
  41. 67.
  42. 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..
  43. 69.
  44. 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.
  45. 72.
  46. 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.
  47. 74.
  48. 75.

    If you look at the source, they’re using the .css()

    method to set visibility and remove hidden classes.
  49. 76.
  50. 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.
  51. 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.
  52. 82.
  53. 83.

    Wikipedia were very surprised when they learned .hide() was their

    biggest bottleneck. Their usage of it was pretty atypical for jQuery code.
  54. 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.
  55. 86.

    Advice Don’t use .hide() for high performance visibility toggling. Use

    el.hidden = true/false or add/remove/toggle class.
  56. 87.
  57. 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()
  58. 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.
  59. 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
  60. 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!
  61. 93.
  62. 94.

    DevTools: State Of The Union New! We now highlight DOM

    updates. Visualise what parts of a node have changed with ease:
  63. 95.
  64. 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.
  65. 102.

    DevTools: State Of The Union New! Web Animation playback: Playback

    and speed controls for controlling animation. Slow motion. Pause.
  66. 103.
  67. 104.

    DevTools: State Of The Union Console: Inspecting an object? Right-click

    functions to jump to their definition in your source code
  68. 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
  69. 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.
  70. 109.

    DevTools: State Of The Union Stepping through apps that use

    a Framework is hard. Usually end up stepping into the Framework :(
  71. 110.

    DevTools: State Of The Union JavaScript Framework Blackboxing fixes that.

    Right click on a Framework/Library script to blackbox..and..
  72. 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.
  73. 113.
  74. 116.

    DevTools: State Of The Union Promises Inspector also supports Async

    call stacks! Enable Async call stack traces
  75. 117.

    We hope you’ve found this preview of what’s new in

    the DevTools useful. There’s a lot more to come!
  76. 119.

    See Making a silky smooth web by Paul Lewis at

    SmashingConf Want a deep dive on the 2015 Performance Model?