High Performance Web Components
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

High Performance Web Components

am

  • 7,898 Views

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.

Statistiken

Views

Gesamtviews
7,898
Views auf SlideShare
3,703
Views einbetten
4,195

Actions

Gefällt mir
12
Downloads
18
Kommentare
0

7 Einbettungen 4,195

http://www.scoop.it 4072
https://twitter.com 100
http://www.slideee.com 15
http://webcache.googleusercontent.com 5
http://plus.url.google.com 1
http://www.google.com 1
https://www.google.co.in 1
Mehr ...

Zugänglichkeit

Details hochladen

Uploaded via as Microsoft PowerPoint

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

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

Löschen
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

High Performance Web Components Presentation 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