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

JavaScript Code at the Speed of Light

JavaScript Code at the Speed of Light

Using Content Delivery Networks and CDNs for better #webperf.

Clay Smith

April 16, 2016

More Decks by Clay Smith

Other Decks in Programming


  1. JavaScript Code at the Speed of Light Clay Smith, New

    Relic JSConfUY - April 16, 2016 @smithclay
  2. ¿Por qué estoy aquí? • Been nerding out on internet

    protocols (last week: IETF 95). • Think a better understanding of the network layer is really important.
  3. What's our mental model for a modern JavaScript app?

  4. The Client Server Model Browser Server HTTP

  5. An application Server HTTP application.js index.html application.css "My App"

  6. –AlbertEinstein.js "JavaScript reality is merely an illusion."

  7. More hosts === more complexity e.test/app.js index.html e.test/app.css "My App"

    g.test/analytics.js f.test/bootstrap.css z.test/font.woff z.test/foo.svg HTTP
  8. Connections have a cost Retrieved: April 1, 2016 http://httparchive.org/interesting.php#connections

  9. Are we building distributed systems? "A distributed system consists of

    a collection of distinct processes which are spatially separated, and which communicate with one another by exchanging messages." —Leslie Lamport, 1978 See also: http://dl.acm.org/citation.cfm?id=2482856
  10. Why is it so difficult?

  11. J.M. Wing's Three Drivers of Computing Society Technology Science From:

    Computational Thinking and Thinking about Computing (2008)
  12. Physics and JavaScript apps Information can't travel faster than the

    speed of light. 299792458 meters/sec
  13. The speed limit Browser Server HTTP This connection can't defy

    the laws of physics.
  14. It's not fast enough Source Destination Great Circle Distance Round

    Trip Time in Fiber SFO London 5,375 miles 84 ms SFO Cape Town 10,124 miles 158 ms SFO Montevideo 6,554 miles 102 ms 1 ms at speed of light = Slightly less than width of Uruguay
  15. What to do? 1.Move it geographically closer 2.Optimize and/or use

    better abstractions
  16. Origin Server Moving it closer with CDNs Browser CDN Edge

    HTTP HTTP Short distance Long Distance HTTP requests get routed to a nearby location using the CDN network.
  17. Use the headers • Set headers on responses control to

    caching: • Cache-Control: max-age=10, public • The bigger the max-age is, the longer it is cached. • Always verify settings (check response headers in Chrome web inspector or cURL) Great resource: http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/
  18. File asset revisioning • The filename has an MD5 hash

    of the contents: app-d2ae34123.js • Cache-Control: max-age=31536000, public • Use a grunt and gulp plugin— someone has already done this (i.e. https://github.com/cbas/ grunt-rev)
  19. What if the CDN goes down? <script src="https://code.jquery.com/ jquery-1.12.2.min.js"></script> <script>window.jQuery

    || document.write('<script src="js/vendor/ jquery-1.12.2.min.js"><\/script>')</script> https://github.com/h5bp/html5-boilerplate/blob/master/dist/ index.html Future: https://w3c.github.io/network-error-logging/
  20. Better abstractions

  21. The OSI Model explained using a chivito Physical (ethernet/pan) Data

    Link (ethernet/rodajas de tomate) Network (IP/panceta) Transport (TCP/jamón cocido) Session (mozzarella) Presentation (JPG/mayonesa) Application (HTTP/Currasco) Lower Layers Upper Layers
  22. https://blog.newrelic.com/2016/02/09/http2-best-practices-web-performance/

  23. GET /cat.gif GET /app.css 200 a.js HTTP/2: one connection, many

    requests 404 favicon.ico Single TCP Connection (Multiplexing) Client Server
  24. HTTP/2 es tu amigo • No more concatenation (mega- app.js)

    • Adios, inlining. • Adios, domain sharding. • Server Push (highly experimental)
  25. HTTP/2 requires HTTPS. Free TLS certificates (world's 3rd largest authority):

  26. Server Browser CDN Edge HTTP/2 HTTP/1 Some CDNs already support

    HTTP/2. Full list is here: https:// istlsfastyet.com/ H2 + CDNs
  27. How do we build complex [JavaScript apps] simply? One of

    the "unresolved questions in computing":
  28. Measure and use data to make decisions. Be suspicious...

  29. Un millón de gracias. Clay Smith, New Relic @smithclay https://blog.newrelic.com/2016/02/09/http2-best-