$30 off During Our Annual Pro Sale. View Details »

000000000

Addy Osmani
February 15, 2011
0
78

 000000000

0000000000000

Don't share. Just a draft. Thx.

Addy Osmani

February 15, 2011
Tweet

More Decks by Addy Osmani

See All by Addy Osmani
The Cost Of JavaScript in 2023
addyosmani
9
3k
Building Effective Engineering Teams - LeadDev
addyosmani
22
1.2k
Communicating Effectively As A Tech Lead
addyosmani
3
3.8k
The Future Of Performance Tooling
addyosmani
1
460
Picture Perfect - How To Instantly Load Images
addyosmani
0
380
Polyfilling The Web Forward
addyosmani
1
260
Picture Perfect - An Image Optimization Talk
addyosmani
1
350
Learning Patterns
addyosmani
29
68k
Optimizing For Core Web Vitals
addyosmani
0
410

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Designing for Performance
lara
601
66k
Web development in the modern age
philhawksworth
201
9.9k
Infographics Made Easy
chrislema
236
17k
What the flash - Photography Introduction
edds
64
11k
The Invisible Side of Design
smashingmag
291
49k
Unsuck your backbone
ammeep
660
56k
Done Done
chrislema
178
15k
Building Applications with DynamoDB
mza
87
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
14k
Intergalactic Javascript Robots from Outer Space
tanoku
264
26k
Writing Fast Ruby
sferik
615
59k

Transcript

  1. Rendering Performance
    Case Studies
    Gone in 60 frames per second
    Velocity Europe
    @addyosmani

    View Slide

  2. #perfmatters

    View Slide

  3. What we build for the
    web is evolving.

    View Slide

  4. View Slide

  5. Users ❤ snappy
    experiences.

    View Slide

  6. Silky smooth scrolling
    Buttery animation
    Great performance everywhere.
    High performance web apps have:

    View Slide

  7. View Slide

  8. Speed must be treated as an
    essential design feature.

    View Slide

  9. The fastest web page is..

    View Slide

  10. View Slide

  11. Everything we add increases
    the work the browser has to
    do to put pixels on the screen

    View Slide

  12. View Slide

  13. Network Compute Render
    3 Pillars Of Performance

    View Slide

  14. Mobile web performance goals
    1. Connectivity
    - Show above the fold content in < 1s
    - Serve critical path CSS in first 14KB
    2. Max of 200ms server response time
    3. 60fps scrolling, 60fps transitions
    4. Speed index under 1000*
    * average time visual parts of the page display per WebPageTest

    View Slide

  15. Today we’ll focus on this.
    1. Connectivity
    - Show above the fold content in < 1s
    - Serve critical path CSS in first 14KB
    2. Max of 200ms server response time
    3. 60fps scrolling, 60fps transitions
    4. Speed index under 1000

    View Slide

  16. Rendering performance
    impacts user experience.

    View Slide

  17. "In an A/B test, we slowed down
    scrolling from 60fps down to 30fps.
    Engagement collapsed"
    ~ Shane O'Sullivan
    * in their native app, fluctuating
    between 30 to 45fps.
    * Consistent 30fps performed
    second best

    View Slide

  18. View Slide

  19. "We tested pre-fetching JS in search
    results, which caused jank in our pages.
    All business metrics got worse"
    ~ Jonathan Klein

    View Slide

  20. Response rates matter.

    View Slide

  21. See the flow of how Chrome
    renders pages

    View Slide

  22. DevTools
    Timeline

    View Slide

  23. View Slide

  24. drag here to filter
    record/stop
    30fps = 33ms per frame, 60fps = 16ms per frame

    View Slide

  25. what do these records mean?

    View Slide

  26. Let’s dive in!

    View Slide

  27. Parse HTML

    View Slide

  28. GET / HTTP /1.1
    host: www.example.com
    Make a request

    View Slide

  29. View Slide






  30. MA RESPONSE






    HTML wizaaaaard
    I am teh HTML masterz.



    Get a response

    View Slide









  31. HTML wizaaaaard
    I am teh HTML masterz.





    View Slide



  32. <br/><section><br/><h1> <img> <p><br/><head><br/><title> <link><br/>Get a response<br/>

    View Slide

  33. Recalculate Style

    View Slide

  34. DOM CSS
    +
    Recalculate Style
    Styling the DOM

    View Slide

  35. Render tree
    Styling the DOM

    View Slide





  36. Styling the DOM

    View Slide





  37. Styling the DOM
    section p {
    display: none;
    }

    View Slide





  38. Styling the DOM
    section h1:after {
    content: "<333 pseudo elemz"
    }

    View Slide

  39. Layout

    View Slide

  40. html, body {
    marg: 0;
    width: 300px;
    height: 700px;
    background: white;
    color: white;
    }
    body {
    background: #888;
    }
    section {
    display: block;
    margin-top:30%;
    padding-top:60px;
    width:100%;
    background:#444;
    }
    section h1:after{
    content: '<3 pseudo';
    height: 40px;
    margin-top: 10px;
    display: block;
    }
    img {
    margin: 30px;
    border-radius: 4px;
    border: 3px solid white;
    box-shadow: 0 2px 2px rgba(0,0,0,3);
    }
    Layout





    Laying out the document

    View Slide

  41. Vector Raster
    Rasterizer

    View Slide

  42. drawPoints
    drawOval
    drawRectangle
    drawRoundedRect
    drawPath
    drawBitmap
    drawText
    drawLine
    drawArc
    clear
    translate
    save
    restore
    clipPath
    moveTo
    lineTo
    Rasterizer

    View Slide

  43. Paint

    View Slide

  44. Rasterizer

    View Slide

  45. Image Resize

    View Slide

  46. Image Decode + Resize
    Draw Bitmap

    View Slide

  47. Move Elements

    View Slide

  48. Composite Layers

    View Slide

  49. Composite Layers
    Layers

    View Slide

  50. All together, you should
    expect to see..

    View Slide

  51. width
    margin
    border
    left/top
    box-shadow
    border-radius
    background
    outline
    transform
    opacity

    View Slide

  52. DOM to pixels on the screen
    Recalc styles
    Calc styles that apply to elements
    Layout
    Generate geometry for each element
    Paint
    Fill pixels for each element into layers (Paint)
    Composite layers
    Draw layers out to the screen

    View Slide

  53. What about frame rate?

    View Slide

  54. Frame rate
    Rate at which a device produces
    consecutive images to the screen

    View Slide

  55. To see what’s impacting
    rendering, look at FPS

    View Slide

  56. A consistent frame rate is our ideal

    View Slide

  57. Why target 60fps?

    View Slide

  58. Match the refresh rate of the
    devices you are targeting.

    View Slide

  59. Jank
    Disruption in consistent frame
    rate that manifests itself visually

    View Slide

  60. < 15fps
    Your users will perceive jerkiness and jank

    View Slide

  61. View Slide

  62. 30fps
    Smooth as long as it’s a constant 30fps

    View Slide

  63. 60fps
    Smooth animations and transitions with no stutter

    View Slide

  64. Frame budget
    At 60fps, you have 16.7ms budget for
    Logic processing
    Compute processing
    Rendering

    View Slide

  65. Frame budget
    It’s more like 8-10ms budget because
    - Browser, JS engine, renderer processes
    - Margin for slower devices like mobile.

    View Slide

  66. What causes jank?

    View Slide

  67. Properties that trigger layout (reflow)
    Correct as of November, 2013.

    View Slide

  68. Correct as of November, 2013.

    View Slide

  69. Drop-shadows
    Blurs
    Linear-gradients
    Fixed background images
    Heavy styles can cause jank*
    Correct as of November, 2013.

    View Slide

  70. CSS Styles
    that affect
    paint, layout

    View Slide

  71. View Slide

  72. Recalculate style triggered when styles
    are computed or changed.
    Heavy use of JS to rearrange the page (e.g onscroll) is bad

    View Slide

  73. Heavy onscroll() handlers
    Doing shit inside of scroll is terrible

    View Slide

  74. View Slide

  75. Scrolling
    Correct as of November, 2013.
    Watch out for:
    Unnecessary paints:
    position:fixed
    overflow:scroll
    hover effects
    touch listeners
    Long paints:
    Complex CSS
    Image decodes
    Large empty layers

    View Slide

  76. Long image decodes and resizes
    Remember to pre-scale your images!

    View Slide

  77. View Slide

  78. DOM elements with measurably high
    paint cost
    Measure what elements might be slowing you down.

    View Slide

  79. Too much inside your event handlers

    View Slide

  80. View Slide

  81. Heavy animation or data processing
    Where possible rely on rAF or Web Workers

    View Slide

  82. Position transform: translate(npx, npx);
    Scale transform: scale(n);
    Rotation transform: rotate(ndeg);
    Opacity opacity: 0....1;
    4 things a browser can
    animate cheaply
    Move all your visual effects to these things.
    Transition at your own risk.
    translateZ/3d may be required*

    View Slide

  83. View Slide

  84. View Slide

  85. Over-complexity
    JS is single threaded if timers fired, input handlers running. Your rAF callback just won't run

    View Slide

  86. Hardware acceleration
    GPU compositing

    View Slide

  87. Old-skool painting
    All your elements get painted into one big bitmap

    View Slide

  88. Old-skool painting
    What if we had separate bitmaps, or "layers"? Click.

    View Slide

  89. Old-skool painting
    What if we had separate bitmaps, or "layers"? Click.

    View Slide

  90. Layers & Compositing
    Hardware compositing uses the GPU to help build the page
    Elements are broken out to a bunch of layers
    Those layers are uploaded to the GPU as textures
    The GPU composites those textures together

    View Slide

  91. More: DevTools Settings

    View Slide

  92. Useful Settings
    red shaded rectangles
    around repainted regions
    orange borders around
    composited layers
    yellow border around
    touch handler listeners

    View Slide

  93. Layer promotion hacks
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0,0,0);
    1 -webkit-transform: translate3d(0,0,0)
    Use with caution!!
    Blink/Webkit
    iOS
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    1 -webkit-transform: translate3d(0,0,0)

    View Slide

  94. View Slide

  95. New! Layers panel
    Visualize elements promoted to a layer with the new layers panel (experimental)

    View Slide

  96. View Slide

  97. Layout thrashing

    View Slide

  98. When JS violently writes, then
    reads from the DOM repeatedly
    causing reflow

    View Slide

  99. View Slide

  100. The slow way
    while (i--) {
    var greenBlockWidth = sizer.offsetWidth;
    ps[i].style.width = greenBlockWidth + 'px';
    }

    View Slide

  101. The right way
    var greenBlockWidth = sizer.offsetWidth;
    while (i--) {
    ps[i].style.width = greenBlockWidth + 'px';
    }

    View Slide

  102. View Slide

  103. Writes to the DOM
    invalidate layout
    Browser wants to wait until the end of the current frame to reflow.

    View Slide

  104. Querying geometric values
    before a frame completes,
    forces early layout.
    Forced synchronous layout

    View Slide

  105. View Slide

  106. It’s a performance killer.

    View Slide

  107. FastDOM
    Batches DOM reads/writes on the
    next frame using rAF for scheduling.

    View Slide

  108. View Slide

  109. ~ Paul Irish

    View Slide

  110. Case studies

    View Slide

  111. Don’t guess it, test it!

    View Slide

  112. Case study: Flickr
    with thanks to Scott Schiller @ Flickr

    View Slide

  113. Web seeing a trend of
    vertical parallax effects.

    View Slide

  114. inception-explained.com

    View Slide

  115. View Slide

  116. flickr.com (optimized)

    View Slide

  117. View Slide

  118. But scroll used to be significantly slower.

    View Slide

  119. For each Y pixels of vertical axis
    scrolling, move an absolutely positioned
    image in the same direction.

    View Slide

  120. For each Y pixels of vertical axis
    scrolling, move an absolutely positioned
    image in the same direction.
    window.onscroll()
    backgroundPosition
    marginTop
    or
    el

    View Slide

  121. window.onscroll = function(e) {
    var parallax = document.getElementById('parallax-background');
    parallax.style.marginTop = (window.scrollY/2) + 'px';
    }
    Minimal parallax example

    View Slide

  122. Neither marginTop or
    backgroundPosition alone perform well.
    They don’t use hardware compositing.

    View Slide

  123. Demo (slow)

    View Slide

  124. View Slide

  125. Timeline view

    View Slide

  126. Have the GPU help with
    accelerating compositing of
    the expensive parts
    Trick

    View Slide

  127. Elements can be promoted to a layer
    using translateZ() or translate3D()
    Avoid expensive paints
    Reminder

    View Slide

  128. window.onscroll = function(e) {
    var parallax = document.getElementById('parallax-background');
    parallax.style.transform = 'translate3d(0px,' + (window.scrollY/2) +
    'px, 0px)';
    }
    Optimized parallax example

    View Slide

  129. Promoting the element to a
    new layer

    View Slide

  130. Demo (fast)

    View Slide

  131. View Slide

  132. Timeline view

    View Slide

  133. Twitter Bootstrap 3

    View Slide

  134. View Slide

  135. View Slide

  136. background-
    image:
    linear-
    gradient(
    to bottom,
    #ffffff,
    #e6e6e6);

    View Slide

  137. 100% faster paint time.

    View Slide

  138. BS3 much more viable for sites
    that need to work well on
    under-powered mobile and
    tablet devices

    View Slide

  139. BS3 much more viable for sites
    that need to work well on
    under-powered mobile and
    tablet devices

    View Slide

  140. Pitchfork

    View Slide

  141. Why is scrolling in this Daft Punk
    site so slow?

    View Slide

  142. View Slide

  143. View Slide

  144. Pre-scale images where possible
    to avoid resize cost.

    View Slide

  145. View Slide

  146. Live case study:
    Pinterest

    View Slide

  147. Post-optimization

    View Slide

  148. View Slide

  149. Pre-optimization

    View Slide

  150. View Slide

  151. View Slide

  152. View Slide

  153. Case study: Google+
    with thanks to Steve Kobes @ Google+

    View Slide

  154. Perf went from 12fps to 60fps

    View Slide

  155. View Slide

  156. Jank bustin’

    View Slide

  157. Simplified G+ layout

    View Slide

  158. Simplified G+ layout
    position:fixed
    position:fixed

    View Slide

  159. Problem.

    View Slide

  160. A position:fixed element causes a
    repaint when moved within its layer.

    View Slide

  161. To avoid the repaint, put the element
    in its own layer.

    View Slide

  162. Simplified G+ layout
    translateZ(0)
    translateZ(0)

    View Slide

  163. Caveats of translateZ
    - more layers = more time compositing layers
    - text anti-aliasing requires an opaque background within the layer
    - triggers Safari positioning bugs inside iframes

    View Slide

  164. Too many layers?
    Sometimes a style creates compositing layers for all positioned descendants.

    View Slide

  165. Another problem.

    View Slide

  166. G+ styles for card-flip animation

    View Slide

  167. -webkit-backface-visibility: hidden

    View Slide

  168. Causes every descendent element
    to get its own layer

    View Slide

  169. Remove it, apply it through JS for
    duration of the card animation
    The Fix!

    View Slide

  170. one last problem

    View Slide

  171. Forced synchronous layouts
    Modifying the DOM invalidates layout.
    element.innerHTML = '...'; // Layout invalidated.

    View Slide

  172. Measuring the DOM
    depends on the layout
    If previously invalidated, this forces
    synchronous layout
    (since execution cannot continue until the correct value is obtained).
    alert(element.offsetHeight); // Layout forced.

    View Slide

  173. G+ reduced synchronous layouts
    cards.forEach(function(card){
    appendHTML(card);
    measure(card);
    });
    write
    read
    write
    read..
    cards.forEach(function(card){
    appendHTML(card);
    });
    cards.forEach(function(card){
    measure(card);
    });
    write
    write
    read
    read..
    They reduced them from O(n) to O(1) by refactoring a loop

    View Slide

  174. Forced Synchronous Layouts
    Timeline shows where your code is causing synchronous layouts
    Remember to scroll down for the second stack trace.

    View Slide

  175. Bonus optimization
    Disable hover effects while scrolling

    View Slide

  176. Bonus optimization
    Animate with translate instead of left/top

    View Slide

  177. Paint performance tooling in
    other browsers

    View Slide

  178. There’s now lots of tooling to improve
    the responsiveness of your UIs.
    BROWSER SUPPORT CATS HAVE BEEN LISTENING

    View Slide

  179. IE F12 Developer Tools
    UI Responsiveness Tool shows frame rate

    View Slide

  180. Firefox DevTools: Paint flashing
    Highlight areas being painted

    View Slide

  181. WebKit Nightlies: Paint counts of layers

    View Slide

  182. WebKit Nightlies: Reasons for compositing

    View Slide

  183. In summary...

    View Slide

  184. Frame rate matters and
    can impact engagement

    View Slide

  185. Don’t overdue to the layout.
    Do reads before writes.

    View Slide

  186. Be mindful of paint
    costs. Use the DevTools.

    View Slide

  187. Check your perf on
    desktop and mobile.

    View Slide

  188. Mobile-first performance benchmarking
    Test on low-end hardware. Get 60fps there.

    View Slide

  189. If you’re building something, set
    performance objectives up front.

    View Slide

  190. Hit those objectives, add tests to
    measure and then never regress!

    View Slide

  191. If all goes well, this could be you!

    View Slide

  192. To learn more checkout
    jankfree.org

    View Slide

  193. Use tools. not rules.

    View Slide

  194. Thank you.
    @addyosmani
    +AddyOsmani

    View Slide