Downloaded 38 times
![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);](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-26-2048.jpg)
![<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>](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-37-2048.jpg)
![<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>](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-38-2048.jpg)
![<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>](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-39-2048.jpg)
![<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>](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-40-2048.jpg)
![<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>](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-41-2048.jpg)
![<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?](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-42-2048.jpg)
![<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!](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-43-2048.jpg)
![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);](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-54-2048.jpg)
![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));
}">](https://image.slidesharecdn.com/html5devconf-webcomp-20140522-140522085400-phpapp01/75/High-Performance-Web-Components-55-2048.jpg)
More Related Content
![[refreshpitt] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv10-130609110047-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[psuweb] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-psuwebv2-130606095220-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to High Performance Web Components
High Performance Web Components
- 1.
- 2.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 19. p(frontend SPOF) = p(atleast 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 partyup) = 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
- 21.
- 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.9980.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)
- 24.
- 25.
- 26. load scripts async vars0 = document. getElementsByTagName('script')[0]; var s1 = document. createElement('script'); s1.async = true; s1.src = 'common.js'; s0.parentNode.insertBefore(s1, s0);
- 27.
- 31. HTML Templates Shadow DOM HTMLImports Custom Elements
- 32. HTML Templates Shadow DOM HTMLImports Custom Elements
- 33. Support Chrome 33-34 withchrome://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='NavTiming' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>
- 36. navtiming.php: <div id='navtiming-content'> <input type=button value='NavTiming' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>
- 37. <html> <head> <link rel="import" href="navtiming.php"> </head> <body> <divid="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> <divid="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> <divid="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> <divid="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> <divid="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> <divid="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> <divid="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: stopparsing 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 HTMLImports Custom Elements
- 46. Custom Elements <link rel="import" href="navtimingce.php"> navtimingce.php: <script> varNavTimingProto = 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> varNavTimingProto = 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> varNavTimingProto = 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> varNavTimingProto = Object.create(HTMLElement.prototype); NavTimingProto.createdCallback = function(){ this.innerHTML = "<input type=button…>"; }; document.registerElement('nav-timing', {prototype: NavTimingProto}); function doNavTiming() {...}; MUST have hyphen!
- 50.
- 51.
- 52.
- 53. solution: BLOCK Chrome 33-34: stopparsing 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 Importsasync 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 Importsasync <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 loadsynchronously 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/
- 60.
- 61. HTML Imports blockrendering use link+async spec in flux, make suggestions check your site for Frontend SPOF takeaways
- 63.