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. Time to screen Key performance metric Aiming for 1s on

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

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

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

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

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

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

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

    eliminate redirects Time to screen: The network
  9. 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
  10. Blocking: inline script waiting on remote CSS <style rel="stylesheet" href="app.css"

    /> <script> var rules = window.styleSheets[0].cssRules; </script>
  11. Blocking: remote script (solution 2) <script> var script = document.createElement('script');

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

    script.src = "app.js"; document.head.appendChild(script); </script> HIDDEN FROM PRE-PARSER!
  13. Blocking: fetching stylesheets (solution) <head> <style> // Core styles in

    the head of the document. body { background: grey; color: #3A2FDE; } </style> </head> <body>
  14. 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
  15. Blocking web fonts FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer

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

    from the critical path Make cross-browser behaviour consistent
  17. 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>
  18. Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> h1 { font-family:

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