'

Web Components

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





Слайд 0

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

flickr.com/photos/krhamm/171302038 sync


Слайд 24

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


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


Слайд 26

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


Слайд 27


Слайд 28

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 29

HTML Templates Shadow DOM HTML Imports Custom Elements


Слайд 30


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


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


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


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


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


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


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


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


Слайд 39

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


Слайд 40


Слайд 41


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


Слайд 43

HTML Templates Shadow DOM HTML Imports Custom Elements


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


Слайд 45

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


Слайд 46

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


Слайд 47

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


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


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


Слайд 50

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


Слайд 51

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


Слайд 52


Слайд 53

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


×

HTML:





Ссылка: