Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (14)
Similar to High Performance Web Components
Similar to High Performance Web Components (20)
More from Steve Souders
Recently uploaded
Recently uploaded (20)
High Performance Web Components
- 15. Frontend SPOF
- 19. 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
- 20. 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
- 22. 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
- 23. 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)
- 26. 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);
- 31. HTML Templates Shadow DOM HTML Imports Custom Elements
- 32. HTML Templates Shadow DOM HTML Imports Custom Elements
- 33. 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
- 35. navtiming.php: <div id='navtiming-content'> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>
- 36. navtiming.php: <div id='navtiming-content'> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>
- 37. <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>
- 38. <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>
- 39. <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>
- 40. <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>
- 41. <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>
- 42. <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?
- 43. <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!
- 44. 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
- 45. HTML Templates Shadow DOM HTML Imports Custom Elements
- 46. 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() {...};
- 47. 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() {...};
- 48. 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() {...};
- 49. 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!
- 51. <html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition?
- 52. <html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition!
- 53. 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
- 54. 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);
- 55. 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)); }">
- 58. more granularity load asynchronously load synchronously for specific component(s) flickr.com/photos/abitha_arabella/13444735444
- 59. 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/
- 61. HTML Imports block rendering use link+async spec in flux, make suggestions check your site for Frontend SPOF takeaways