High Performance Web Components

4,496
-1

Published on

How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.

Published in: Software

High Performance Web Components

  1. 1. High Performance Web Components @souders stevesouders.com/docs/html5devconf-webcomp-20140522.pptx flickr.com/photos/brenderous/4255550788
  2. 2. flickr.com/photos/brenderous/4255550788
  3. 3. bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100
  4. 4. flickr.com/photos/brenderous/4255550788
  5. 5. flickr.com/photos/countylemonade/5940567593
  6. 6. SPOF flickr.com/photos/darwinbell/465459020/
  7. 7. en.wikipedia.org/wiki/Single_point_of_failure
  8. 8. Frontend SPOF
  9. 9. flickr.com/photos/runneralan/9741423581 scripts stylesheets fonts
  10. 10. p(frontend SPOF) = p(at least one 3rd party down) = 1 – p(all 3rd party up) = 1 – p(3rd party up)n where n = # of 3rd party JS, CSS, & fonts on the page flickr.com/photos/mkamp/2478311790
  11. 11. p(frontend SPOF) example: p(3rd party up) = 0.998 (17 hr/yr) n = 10 p(frontend SPOF) = 1 - p(3rd party up)n = 1 - (0.998)10 = 1 – (0.98) = 0.02 (7.2 days/yr) flickr.com/photos/mkamp/2478311790
  12. 12. bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100
  13. 13. p(3rd party up)? SLAs 99.9% - GA, Google Apps 99.95% - GAE, Amazon EC2 Uptime 2007-2012 99.93% - GoDaddy 99.86% - GitHub 99.67% - Google Apps 97.43% - AWS flickr.com/photos/mkamp/2478311790iwgcr.org/wp-content/uploads/2013/06/IWGCR-Paris.Ranking-003.2-en.pdf
  14. 14. p(frontend SPOF) flickr.com/photos/mkamp/2478311790 0.999 0.998 0.997 10 (50th) 0.010 (3.6) 0.020 (7.2) 0.030 (10.8) 23 (80th) 0.023 (8.3) 0.045 (16.4) 0.067 (24.4) 34 (90th) 0.033 (12.2) 0.066 (24.0) 0.097 (35.4) p(3rd party up) p(frontend SPOF) n (days/year)
  15. 15. flickr.com/photos/krhamm/171302038 sync
  16. 16. flickr.com/photos/8229345@N02/7980116331 async
  17. 17. load scripts async var s0 = document. getElementsByTagName('script')[0]; var s1 = document. createElement('script'); s1.async = true; s1.src = 'common.js'; s0.parentNode.insertBefore(s1, s0);
  18. 18. https://www.flickr.com/photos/thisisbossi/3069180895
  19. 19. HTML Templates Shadow DOM HTML Imports Custom Elements
  20. 20. HTML Templates Shadow DOM HTML Imports Custom Elements
  21. 21. Support Chrome 33-34 with chrome://flags/ • experimental Web Platform features • Experimental JavaScript • HTML Imports Chrome 36+: no flags Polymer: http://www.polymer-project.org/ flickr.com/photos/callumscott2/167684986
  22. 22. navtiming.php: <div id='navtiming-content'> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>
  23. 23. navtiming.php: <div id='navtiming-content'> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>
  24. 24. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html>
  25. 25. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html>
  26. 26. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html>
  27. 27. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html>
  28. 28. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html>
  29. 29. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html> Race Condition?
  30. 30. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <div id="target"></div> <script> var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content.cloneNode(true)); </script> </body> </html> Race Condition!
  31. 31. resolution: BLOCK Chrome 33-34: stop parsing at next SCRIPT tag Chrome 36: stop parsing immediately – entire BODY is blocked from rendering flickr.com/photos/runneralan/9741423581
  32. 32. HTML Templates Shadow DOM HTML Imports Custom Elements
  33. 33. Custom Elements <link rel="import" href="navtimingce.php"> navtimingce.php: <script> var NavTimingProto = Object.create(HTMLElement.prototype); NavTimingProto.createdCallback = function(){ this.innerHTML = "<input type=button…>"; }; document.registerElement('nav-timing', {prototype: NavTimingProto}); function doNavTiming() {...};
  34. 34. Custom Elements <link rel="import" href="navtimingce.php"> navtimingce.php: <script> var NavTimingProto = Object.create(HTMLElement.prototype); NavTimingProto.createdCallback = function(){ this.innerHTML = "<input type=button…>"; }; document.registerElement('nav-timing', {prototype: NavTimingProto}); function doNavTiming() {...};
  35. 35. Custom Elements <link rel="import" href="navtimingce.php"> navtimingce.php: <script> var NavTimingProto = Object.create(HTMLElement.prototype); NavTimingProto.createdCallback = function(){ this.innerHTML = "<input type=button…>"; }; document.registerElement('nav-timing', {prototype: NavTimingProto}); function doNavTiming() {...};
  36. 36. Custom Elements <link rel="import" href="navtimingce.php"> navtimingce.php: <script> var NavTimingProto = Object.create(HTMLElement.prototype); NavTimingProto.createdCallback = function(){ this.innerHTML = "<input type=button…>"; }; document.registerElement('nav-timing', {prototype: NavTimingProto}); function doNavTiming() {...}; MUST have hyphen!
  37. 37. insert custom element <nav-timing></nav-timing> That's it!
  38. 38. <html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition?
  39. 39. <html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition!
  40. 40. solution: BLOCK Chrome 33-34: stop parsing at 1st SCRIPT tag Chrome 36: stop parsing immediately – entire BODY is blocked from rendering all: ignore hyphenated tags if not registered flickr.com/photos/runneralan/9741423581
  41. 41. load HTML Imports async var link = document. createElement('link'); link.rel = 'import'; link.onload = function() { var link = document.querySelector('link[rel=import]'); var content = link.import.querySelector('#navtiming-content'); document.getElementById('target').appendChild(content.cloneNode(true)); }; link.href = 'navtiming.php'; document.getElementsByTagName ('head')[0].appendChild(link);
  42. 42. load HTML Imports async <link rel="import" href="navtiming.php" async onload="function() { var link = document.querySelector('link[rel=import]'); var content = link.import.querySelector('#navtiming-content'); document.getElementById('target').appendChild(content.cloneNode(true)); }">
  43. 43. more granularity load asynchronously load synchronously for specific component(s) flickr.com/photos/abitha_arabella/13444735444
  44. 44. suggested fixes "lazyload" attribute – DONE! "elements" attribute make LINK valid w/in BODY flickr.com/photos/chudo1909/6979697127stevesouders.com/blog/2013/12/02/html-imports-scope-security-and-suggestions/
  45. 45. flickr.com/photos/chhani/8016548370
  46. 46. HTML Imports block rendering use link+async spec in flux, make suggestions check your site for Frontend SPOF takeaways
  47. 47. Steve Souders @souders stevesouders.com/docs/html5devconf-webcomp-20140522.pptx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×