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?

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

March 09, 2015
Tweet

Transcript

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

  2. None
  3. None
  4. None
  5. None
  6. None
  7. waiting for fonts.com

  8. http:// Unreliable network

  9. http:// Resilient web

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

  11. Content THREE STAGES Enhancement Leftovers

  12. Content THREE STAGES Enhancement Leftovers

  13. Content THREE STAGES Enhancement Leftovers

  14. Content THREE STAGES Enhancement Leftovers

  15. Content Enhancement Leftovers

  16. Content Enhancement Leftovers

  17. Time to screen Key performance metric Aiming for 1s on

    mobile Understand the network Understand the browser
  18. Time to screen: The network DNS lookup TCP connect HTTP

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

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

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

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

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

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

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

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

    request Server time HTTP resp HTTP Redirect SSL Handshake
  27. Eliminate redirects Flush the document early Prefetch DNS But mostly,

    eliminate redirects Time to screen: The network
  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
  29. Time to screen: Start render HTML parser DOM tree Layout

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

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

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

    Paint Render tree
  33. Blocking: remote script <script src="app.js"></script>

  34. Blocking: inline script waiting on remote CSS <style rel="stylesheet" href="app.css"

    /> <script> var rules = window.styleSheets[0].cssRules; </script>
  35. Blocking: remote script (solution 1) </div> <script src="app.js"></script> </body> </html>

  36. Blocking: remote script (solution 2) <script> var script = document.createElement('script');

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

    script.src = "app.js"; document.head.appendChild(script); </script> HIDDEN FROM PRE-PARSER!
  38. Blocking: remote script (solution 3) <script src=“app.js" async></script>

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

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

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

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

    Paint Render tree
  43. Blocking: fetching stylesheets <style rel="stylesheet" href="app.css" />

  44. Blocking: fetching stylesheets (solution) <head> <style> // Core styles in

    the head of the document. body { background: grey; color: #3A2FDE; } </style> </head> <body>
  45. Blocking: critical CSS generators https://github.com/pocketjoso/penthouse http://jonassebastianohlsson.com/ criticalpathcssgenerator/ https://github.com/filamentgroup/criticalcss

  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
  47. Recap: Fault isolation …or swimlaning Avoid synchronous dependencies Uptime is

    not binary
  48. Blocking web fonts

  49. Blocking web fonts

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

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

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

    TEXT RENDER
  53. Blocking web fonts FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer

    Safari Mobile Safari Chrome Opera (Blink) Firefox Opera (Presto)
  54. Web font loader Provide control over font loading Remove fonts

    from the critical path Make cross-browser behaviour consistent
  55. Web font loader <style rel="stylesheet" href="myfonts.css" />

  56. Web font loader <style rel="stylesheet" href="myfonts.css" />

  57. Web font loader <style rel="stylesheet" href="myfonts.css" /> var WebFontConfig =

    { custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; <script src=“//ajax.googleapis.com/webfonts.js" async></script>
  58. Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded">

  59. Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> h1 { font-family:

    georgia, serif; } .clarendon-loaded h1 { font-family: Clarendon, georgia, serif; }
  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; }
  61. http://

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

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

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

    iPhone 4, iOS 5.1
  65. None
  66. Thank-you! lanyrd.com/sddxxk @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike

    cc