'

High Performance Web Components

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





Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4


Слайд 5

flickr.com/photos/brenderous/4255550788


Слайд 6


Слайд 7


Слайд 8


Слайд 9


Слайд 10


Слайд 11


Слайд 12


Слайд 13

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


Слайд 14

flickr.com/photos/brenderous/4255550788


Слайд 15

flickr.com/photos/countylemonade/5940567593


Слайд 16

flickr.com/photos/thisisbossi/3069180895


Слайд 17

SPOF flickr.com/photos/darwinbell/465459020/


Слайд 18

en.wikipedia.org/wiki/Single_point_of_failure


Слайд 19

Frontend SPOF


Слайд 20

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


Слайд 21


Слайд 22


Слайд 23


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

flickr.com/photos/krhamm/171302038 sync


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33


Слайд 34


Слайд 35


Слайд 36

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 37

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 38

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


Слайд 39


Слайд 40

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


Слайд 41

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


Слайд 42

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


Слайд 43

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


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


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

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


Слайд 51

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


Слайд 52

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


Слайд 53


Слайд 54


Слайд 55

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


Слайд 56

HTML Templates Shadow DOM HTML Imports Custom Elements


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


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


Слайд 61

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!


Слайд 62

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


Слайд 63

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


Слайд 64

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


Слайд 65

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


Слайд 66

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!


Слайд 67

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


Слайд 68


Слайд 69


Слайд 70

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


Слайд 71

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/


Слайд 72

flickr.com/photos/chhani/8016548370


Слайд 73

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


Слайд 74


Слайд 75

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


×

HTML:





Ссылка: