Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecting resilient front-ends, jQuery UK, 2015

Architecting resilient front-ends, jQuery UK, 2015

Companies spend hundreds of thousands of dollars on the uptime of their server infrastructure. And yet, web sites in the real world are slow to load and failing all the time. User experiences that are blocked by slow-loading JavaScript or never-loading web fonts are all too common, and undermine the cost of sustaining high availability web servers. In this session we’ll talk about how to architect client-side code for resilience. When things go wrong how can we still deliver a useful and timely experience to users?

Andy Hume

March 09, 2015
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. RESILIENT
    FRONT-ENDS
    @andyhume
    jQuery UK, 2015
    ARCHITECTING

    View full-size slide

  2. waiting for fonts.com

    View full-size slide

  3. http://
    Unreliable network

    View full-size slide

  4. http://
    Resilient web

    View full-size slide

  5. Progressive enhancement
    http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement

    View full-size slide

  6. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  7. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  8. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  9. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  10. Content Enhancement Leftovers

    View full-size slide

  11. Content Enhancement Leftovers

    View full-size slide

  12. Time to screen
    Key performance metric
    Aiming for 1s on mobile
    Understand the network
    Understand the browser

    View full-size slide

  13. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp

    View full-size slide

  14. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp

    View full-size slide

  15. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp

    View full-size slide

  16. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    SSL Handshake

    View full-size slide

  17. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake

    View full-size slide

  18. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake

    View full-size slide

  19. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake

    View full-size slide

  20. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake

    View full-size slide

  21. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake

    View full-size slide

  22. Eliminate redirects
    Flush the document early
    Prefetch DNS
    But mostly, eliminate redirects
    Time to screen: The network

    View full-size slide

  23. Time to screen: The browser
    Single threaded event loop
    1. Construct DOM tree from HTML
    2. Construct render tree from DOM tree and
    stylesheets
    3. Layout paint

    View full-size slide

  24. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  25. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  26. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  27. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  28. Blocking: remote script

    View full-size slide

  29. Blocking: inline script waiting on remote CSS

    <br/>var rules = window.styleSheets[0].cssRules;<br/>

    View full-size slide

  30. Blocking: remote script (solution 1)


    View full-size slide

  31. Blocking: remote script (solution 2)
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>

    View full-size slide

  32. Blocking: remote script (solution 2)
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    HIDDEN FROM PRE-PARSER!

    View full-size slide

  33. Blocking: remote script (solution 3)

    View full-size slide

  34. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  35. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  36. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  37. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree

    View full-size slide

  38. Blocking: fetching stylesheets

    View full-size slide

  39. Blocking: fetching stylesheets (solution)

    <br/>// Core styles in the head of the document.<br/>body {<br/>background: grey;<br/>color: #3A2FDE;<br/>}<br/>


    View full-size slide

  40. Blocking: critical CSS generators
    https://github.com/pocketjoso/penthouse
    http://jonassebastianohlsson.com/
    criticalpathcssgenerator/
    https://github.com/filamentgroup/criticalcss

    View full-size slide

  41. Recap: What blocks render?
    Remote scripts that need to be executed
    synchronously
    Inline script waiting on stylesheet fetch
    Stylesheet fetch for relevant media type/query

    View full-size slide

  42. Recap: Fault isolation
    …or swimlaning
    Avoid synchronous dependencies
    Uptime is not binary

    View full-size slide

  43. Blocking web fonts

    View full-size slide

  44. Blocking web fonts

    View full-size slide

  45. Blocking web fonts
    HTML
    CSS
    FONT
    FONT
    FONT
    START
    RENDER

    View full-size slide

  46. Blocking web fonts
    HTML
    CSS
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER

    View full-size slide

  47. Blocking web fonts
    HTML
    CSS
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER

    View full-size slide

  48. Blocking web fonts
    FALLBACK BLOCKING BLOCKING +
    TIMEOUT
    Internet Explorer Safari
    Mobile Safari
    Chrome
    Opera (Blink)
    Firefox
    Opera (Presto)

    View full-size slide

  49. Web font loader
    Provide control over font loading
    Remove fonts from the critical path
    Make cross-browser behaviour consistent

    View full-size slide

  50. Web font loader

    View full-size slide

  51. Web font loader

    View full-size slide

  52. Web font loader

    var WebFontConfig = {
    custom: {
    families: ['Clarendon', 'Clarendon Bold'],
    urls: ['/myfonts.css'] }
    };

    View full-size slide

  53. Web font loader


    View full-size slide

  54. Web font loader


    h1 {
    font-family: georgia, serif;
    }
    .clarendon-loaded h1 {
    font-family: Clarendon, georgia, serif;
    }

    View full-size slide

  55. CSS Font Loading Module
    document.fonts.load(‘Clarendon’).then(function () {
    document.documentElement.className += ‘clarendon-loaded';
    }
    h1 {
    font-family: georgia, serif;
    }
    .clarendon-loaded h1 {
    font-family: Clarendon, georgia, serif;
    }

    View full-size slide

  56. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs

    View full-size slide

  57. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    iPhone 4, iOS 5.1

    View full-size slide

  58. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    3G (1.6Mps, 300ms RTT)
    iPhone 4, iOS 5.1

    View full-size slide

  59. Thank-you!
    lanyrd.com/sddxxk
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc

    View full-size slide