SlideShare wird heruntergeladen. ×
0
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
High Performance Web Components
Nächste SlideShare
Wird geladen in ...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

High Performance Web Components

7,041

Published on

How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web ...

How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.

Published in: Software, Technologie, Business
0 Kommentare
17 Gefällt mir
Statistiken
Notizen
  • Hinterlassen Sie den ersten Kommentar

Keine Downloads
Views
Gesamtviews
7,041
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
28
Kommentare
0
Gefällt mir
17
Einbettungen 0
No embeds

Inhalte melden
Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
No notes for slide

Transcript

  • 1. Web Components @souders stevesouders.com/docs/sfwebperf-20140429.pptx flickr.com/photos/brenderous/4255550788
  • 2. flickr.com/photos/brenderous/4255550788
  • 3. bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100
  • 4. flickr.com/photos/brenderous/4255550788
  • 5. flickr.com/photos/countylemonade/5940567593
  • 6. SPOF flickr.com/photos/darwinbell/465459020/
  • 7. en.wikipedia.org/wiki/Single_point_of_failure
  • 8. Frontend SPOF
  • 9. flickr.com/photos/runneralan/9741423581 scripts stylesheets fonts
  • 10. flickr.com/photos/krhamm/171302038 sync
  • 11. flickr.com/photos/8229345@N02/7980116331 async
  • 12. 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);
  • 13. https://www.flickr.com/photos/thisisbossi/3069180895
  • 14. HTML Templates Shadow DOM HTML Imports Custom Elements
  • 15. HTML Templates Shadow DOM HTML Imports Custom Elements
  • 16. 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
  • 17. 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() {…
  • 18. 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() {…
  • 19. insert imported HTML var link = document. querySelector('link[rel=import]'); var content = link.import. querySelector('#navtiming- content'); document.getElementById('target'). appendChild(content.cloneNode(tr ue));
  • 20. <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?
  • 21. <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!
  • 22. 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
  • 23. HTML Templates Shadow DOM HTML Imports Custom Elements
  • 24. 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!
  • 25. insert custom element <nav-timing></nav-timing> That's it!
  • 26. <html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition?
  • 27. <html> <head> <link rel="import" href="navtimingce.php"> </head> <body> <nav-timing></nav-timing> </body> </html> Race Condition!
  • 28. 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
  • 29. 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);
  • 30. suggested fixes "lazyload" attribute "elements" attribute make LINK valid w/in BODY flickr.com/photos/chudo1909/6979697127
  • 31. HTML Imports block rendering workarounds (hacks) exist need to change the spec check your site for Frontend SPOF takeaways
  • 32. Steve Souders @souders stevesouders.com/docs/sfwebperf-webcomp-20140429.pptx

×