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 Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. waiting for fonts.com

    View Slide

  8. http://
    Unreliable network

    View Slide

  9. http://
    Resilient web

    View Slide

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

    View Slide

  11. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  12. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  13. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  14. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  15. Content Enhancement Leftovers

    View Slide

  16. Content Enhancement Leftovers

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. Blocking: remote script

    View Slide

  34. Blocking: inline script waiting on remote CSS

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

    View Slide

  35. Blocking: remote script (solution 1)


    View Slide

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

    View Slide

  37. 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 Slide

  38. Blocking: remote script (solution 3)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. Blocking: fetching stylesheets

    View Slide

  44. Blocking: fetching stylesheets (solution)

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


    View Slide

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

    View Slide

  46. 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 Slide

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

    View Slide

  48. Blocking web fonts

    View Slide

  49. Blocking web fonts

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. Web font loader

    View Slide

  56. Web font loader

    View Slide

  57. Web font loader

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

    View Slide

  58. Web font loader


    View Slide

  59. Web font loader


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

    View Slide

  60. 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 Slide

  61. http://

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. View Slide

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

    View Slide