High Performance Web Components


The Presentation inside:

Slide 0

High Performance Web Components @souders stevesouders.com/docs/html5devconf-webcomp-20140522.pptx flickr.com/photos/brenderous/4255550788


Slide 1

Web Components [email protected] stevesouders.com/docs/sap-hpws-20140424.pptx


Slide 2

Web Components [email protected] stevesouders.com/docs/sap-hpws-20140424.pptx


Slide 3


Slide 4

flickr.com/photos/brenderous/4255550788


Slide 5


Slide 6


Slide 7


Slide 8


Slide 9


Slide 10


Slide 11


Slide 12

bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100


Slide 13

flickr.com/photos/brenderous/4255550788


Slide 14

flickr.com/photos/countylemonade/5940567593


Slide 15

flickr.com/photos/thisisbossi/3069180895


Slide 16

SPOF flickr.com/photos/darwinbell/465459020/


Slide 17

en.wikipedia.org/wiki/Single_point_of_failure


Slide 18

Frontend SPOF


Slide 19

flickr.com/photos/runneralan/9741423581 scripts stylesheets fonts


Slide 20


Slide 21


Slide 22


Slide 23

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


Slide 24

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


Slide 25

bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100


Slide 26

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/2478311790 iwgcr.org/wp-content/uploads/2013/06/IWGCR-Paris.Ranking-003.2-en.pdf


Slide 27

p(frontend SPOF) flickr.com/photos/mkamp/2478311790 p(3rd party up) p(frontend SPOF) n (days/year)


Slide 28

flickr.com/photos/krhamm/171302038 sync


Slide 29

flickr.com/photos/[email protected]/7980116331 async


Slide 30

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);


Slide 31

https://www.flickr.com/photos/thisisbossi/3069180895


Slide 32


Slide 33


Slide 34


Slide 35

HTML Templates Shadow DOM HTML Imports Custom Elements


Slide 36

HTML Templates Shadow DOM HTML Imports Custom Elements


Slide 37

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


Slide 38


Slide 39

navtiming.php: <div id='navtiming-content'> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>


Slide 40

navtiming.php: <div id='navtiming-content'> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() { ... } </script>


Slide 41

HTML Imports <link rel="import" href="navtiming.html"> navtiming.html: <div id="navtiming-content"> <input type=button value='Nav Timing' onclick='doNavTiming()'> </div> <script> function doNavTiming() {…} flickr.com/photos/glynlowe/10039742285


Slide 42

insert imported HTML var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming-content'); document.getElementById('target'). appendChild(content. cloneNode(true));


Slide 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>


Slide 44

<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>


Slide 45

<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>


Slide 46

<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>


Slide 47

<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>


Slide 48

<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?


Slide 49

<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!


Slide 50

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


Slide 51

flickr.com/photos/runneralan/9741423581 scripts stylesheets fonts web components (new!)


Slide 52


Slide 53


Slide 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); flickr.com/photos/[email protected]/7980116331


Slide 55

HTML Templates Shadow DOM HTML Imports Custom Elements


Slide 56

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!


Slide 57

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() {...};


Slide 58

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() {...};


Slide 59

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() {...};


Slide 60

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!


Slide 61

insert custom element <nav-timing></nav-timing> That's it!


Slide 62

<html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition?


Slide 63

<html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition!


Slide 64

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


Slide 65

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); blocks!


Slide 66

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)); }">


Slide 67


Slide 68


Slide 69

more granularity load asynchronously load synchronously for specific component(s) flickr.com/photos/abitha_arabella/13444735444


Slide 70

suggested fixes "lazyload" attribute – DONE! "elements" attribute make LINK valid w/in BODY flickr.com/photos/chudo1909/6979697127 stevesouders.com/blog/2013/12/02/html-imports-scope-security-and-suggestions/


Slide 71

flickr.com/photos/chhani/8016548370


Slide 72

HTML Imports block rendering use link+async spec in flux, make suggestions check your site for Frontend SPOF takeaways


Slide 73


Slide 74

Steve Souders @souders stevesouders.com/docs/html5devconf-webcomp-20140522.pptx


×

HTML:





Ссылка: