SlideShare wird heruntergeladen. ×
0
Web
Components
@souders
stevesouders.com/docs/sfwebperf-20140429.pptx flickr.com/photos/brenderous/4255550788
flickr.com/photos/brenderous/4255550788
bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100
flickr.com/photos/brenderous/4255550788
flickr.com/photos/countylemonade/5940567593
SPOF
flickr.com/photos/darwinbell/465459020/
en.wikipedia.org/wiki/Single_point_of_failure
Frontend
SPOF
flickr.com/photos/runneralan/9741423581
scripts
stylesheets
fonts
flickr.com/photos/krhamm/171302038
sync
flickr.com/photos/8229345@N02/7980116331
async
load scripts async
var s0 = document.
getElementsByTagName('script')[0];
var s1 = document.
createElement('script');
s1.as...
https://www.flickr.com/photos/thisisbossi/3069180895
HTML Templates
Shadow DOM
HTML Imports
Custom Elements
HTML Templates
Shadow DOM
HTML Imports
Custom Elements
Support
Chrome 33-34 with chrome://flags/
• experimental Web Platform features
• Experimental JavaScript
• HTML Imports
Ch...
HTML Imports
<link rel="import"
href="navtiming.php">
navtiming.php:
<div id='navtiming-content'>
<input type=button value...
HTML Imports
<link rel="import"
href="navtiming.php">
navtiming.php:
<div id='navtiming-content'>
<input type=button value...
insert imported HTML
var link = document.
querySelector('link[rel=import]');
var content = link.import.
querySelector('#na...
<html>
<head>
<link rel="import" href="navtiming.php">
</head>
<body>
<div id="target"></div>
<script>
var link = document...
<html>
<head>
<link rel="import" href="navtiming.php">
</head>
<body>
<div id="target"></div>
<script>
var link = document...
resolution: BLOCK
Chrome 33-34:
stop parsing at 1st SCRIPT tag
Chrome 36:
stop parsing immediately – entire
BODY is blocke...
HTML Templates
Shadow DOM
HTML Imports
Custom Elements
Custom Elements
<link rel="import"
href="navtimingce.php">
navtimingce.php:
<script>
var NavTimingProto =
Object.create(HT...
insert custom element
<nav-timing></nav-timing>
That's it!
<html>
<head>
<link rel="import" href="navtimingce.php">
</head>
<body>
<nav-timing></nav-timing>
</body>
</html>
Race Con...
<html>
<head>
<link rel="import" href="navtimingce.php">
</head>
<body>
<nav-timing></nav-timing>
</body>
</html>
Race Con...
solution: BLOCK
Chrome 33-34:
stop parsing at 1st SCRIPT tag
Chrome 36:
stop parsing immediately – entire
BODY is blocked ...
load HTML Imports async
var link = document.
createElement('link');
link.rel = 'import';
link.onload = function() {
var li...
suggested fixes
"lazyload" attribute
"elements" attribute
make LINK valid w/in BODY
flickr.com/photos/chudo1909/6979697127
HTML Imports block rendering
workarounds (hacks) exist
need to change the spec
check your site for Frontend
SPOF
takeaways
Steve Souders
@souders
stevesouders.com/docs/sfwebperf-webcomp-20140429.pptx
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
×

High Performance Web Components

7,283

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 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,283
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
29
Kommentare
0
Gefällt mir
17
Einbettungen 0
No embeds

No notes for slide

Transcript of "High Performance Web Components"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×