'

High Performance Web Components

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Web Components souders@google.com stevesouders.com/docs/sap-hpws-20140424.pptx


Слайд 2

Web Components souders@google.com stevesouders.com/docs/sap-hpws-20140424.pptx


Слайд 3


Слайд 4

flickr.com/photos/brenderous/4255550788


Слайд 5


Слайд 6


Слайд 7


Слайд 8


Слайд 9


Слайд 10


Слайд 11


Слайд 12

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


Слайд 13

flickr.com/photos/brenderous/4255550788


Слайд 14

flickr.com/photos/countylemonade/5940567593


Слайд 15

flickr.com/photos/thisisbossi/3069180895


Слайд 16

SPOF flickr.com/photos/darwinbell/465459020/


Слайд 17

en.wikipedia.org/wiki/Single_point_of_failure


Слайд 18

Frontend SPOF


Слайд 19

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


Слайд 20


Слайд 21


Слайд 22


Слайд 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


Слайд 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


Слайд 25

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


Слайд 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


Слайд 27

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


Слайд 28

flickr.com/photos/krhamm/171302038 sync


Слайд 29

flickr.com/photos/8229345@N02/7980116331 async


Слайд 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);


Слайд 31

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


Слайд 32


Слайд 33


Слайд 34


Слайд 35

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 36

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 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


Слайд 38


Слайд 39

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


Слайд 40

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


Слайд 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


Слайд 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));


Слайд 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>


Слайд 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>


Слайд 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>


Слайд 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>


Слайд 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>


Слайд 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?


Слайд 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!


Слайд 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


Слайд 51

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


Слайд 52


Слайд 53


Слайд 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/8229345@N02/7980116331


Слайд 55

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 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!


Слайд 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() {...};


Слайд 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() {...};


Слайд 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() {...};


Слайд 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!


Слайд 61

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


Слайд 62

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


Слайд 63

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


Слайд 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


Слайд 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!


Слайд 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)); }">


Слайд 67


Слайд 68


Слайд 69

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


Слайд 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/


Слайд 71

flickr.com/photos/chhani/8016548370


Слайд 72

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


Слайд 73


Слайд 74

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


×

HTML:





Ссылка: