Web Components


The Presentation inside:

Slide 0

Web Components @souders stevesouders.com/docs/sfwebperf-20140429.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

flickr.com/photos/krhamm/171302038 sync


Slide 24

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


Slide 25

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 26

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


Slide 27


Slide 28

HTML Templates Shadow DOM HTML Imports Custom Elements


Slide 29

HTML Templates Shadow DOM HTML Imports Custom Elements


Slide 30


Slide 31

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 32

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


Slide 33

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


Slide 34

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 35

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 36

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


Slide 38

resolution: BLOCK Chrome 33-34: stop parsing at 1st SCRIPT tag Chrome 36: stop parsing immediately – entire BODY is blocked from rendering start rendering after ~5 seconds block at first script flickr.com/photos/runneralan/9741423581


Slide 39

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


Slide 40


Slide 41


Slide 42

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 43

HTML Templates Shadow DOM HTML Imports Custom Elements


Slide 44

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 45

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


Slide 46

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


Slide 47

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


Slide 48

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 49

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


Slide 50

suggested fixes "lazyload" attribute "elements" attribute make LINK valid w/in BODY flickr.com/photos/chudo1909/6979697127


Slide 51

HTML Imports block rendering workarounds (hacks) exist need to change the spec check your site for Frontend SPOF takeaways


Slide 52


Slide 53

Steve Souders @souders stevesouders.com/docs/sfwebperf-webcomp-20140429.pptx


×

HTML:





Ссылка: