high performance web components
DESCRIPTION
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.TRANSCRIPT
![Page 1: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/1.jpg)
Web Components
@souders
stevesouders.com/docs/sfwebperf-20140429.pptx flickr.com/photos/brenderous/4255550788
![Page 2: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/2.jpg)
![Page 3: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/3.jpg)
flickr.com/photos/brenderous/4255550788
![Page 4: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/4.jpg)
![Page 5: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/5.jpg)
![Page 6: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/6.jpg)
![Page 7: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/7.jpg)
![Page 8: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/8.jpg)
![Page 9: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/9.jpg)
![Page 10: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/10.jpg)
![Page 11: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/11.jpg)
bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100
![Page 12: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/12.jpg)
flickr.com/photos/brenderous/4255550788
![Page 13: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/13.jpg)
flickr.com/photos/countylemonade/5940567593
![Page 14: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/14.jpg)
SPOF
flickr.com/photos/darwinbell/465459020/
![Page 15: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/15.jpg)
en.wikipedia.org/wiki/Single_point_of_failure
![Page 16: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/16.jpg)
Frontend SPOF
![Page 17: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/17.jpg)
flickr.com/photos/runneralan/9741423581
scripts
stylesheets
fonts
![Page 18: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/18.jpg)
![Page 19: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/19.jpg)
![Page 20: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/20.jpg)
![Page 21: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/21.jpg)
flickr.com/photos/krhamm/171302038
sync
![Page 22: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/22.jpg)
flickr.com/photos/8229345@N02/7980116331
async
![Page 23: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/23.jpg)
load scripts asyncvar s0 = document. getElementsByTagName('script')[0];
var s1 = document. createElement('script');
s1.async = true;
s1.src = 'common.js';
s0.parentNode.insertBefore(s1, s0);
![Page 24: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/24.jpg)
https://www.flickr.com/photos/thisisbossi/3069180895
![Page 25: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/25.jpg)
![Page 26: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/26.jpg)
HTML Templates
Shadow DOM
HTML Imports
Custom Elements
![Page 27: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/27.jpg)
HTML Templates
Shadow DOM
HTML Imports
Custom Elements
![Page 28: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/28.jpg)
![Page 29: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/29.jpg)
SupportChrome 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
![Page 30: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/30.jpg)
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() {…
![Page 31: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/31.jpg)
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() {…
![Page 32: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/32.jpg)
insert imported HTML
var link = document. querySelector('link[rel=import]');
var content = link.import. querySelector('#navtiming-content');
document.getElementById('target'). appendChild(content.cloneNode(true));
![Page 33: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/33.jpg)
<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?
![Page 34: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/34.jpg)
<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!
![Page 35: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/35.jpg)
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
![Page 36: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/36.jpg)
HTML Templates
Shadow DOM
HTML Imports
Custom Elements
![Page 37: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/37.jpg)
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!
![Page 38: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/38.jpg)
insert custom element
<nav-timing></nav-timing>
That's it!
![Page 39: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/39.jpg)
<html> <head>
<link rel="import" href="navtimingce.php">
</head> <body>
<nav-timing></nav-timing></body> </html>
Race Condition?
![Page 40: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/40.jpg)
<html> <head>
<link rel="import" href="navtimingce.php">
</head> <body>
<nav-timing></nav-timing></body> </html>
Race Condition!
![Page 41: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/41.jpg)
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
![Page 42: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/42.jpg)
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);
![Page 43: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/43.jpg)
suggested fixes
"lazyload" attribute
"elements" attribute
make LINK valid w/in BODY
flickr.com/photos/chudo1909/6979697127
![Page 44: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/44.jpg)
HTML Imports block rendering
workarounds (hacks) exist
need to change the spec
check your site for Frontend SPOF
takeaways
![Page 45: High Performance Web Components](https://reader035.vdocument.in/reader035/viewer/2022062307/554a1d3eb4c90507558b57be/html5/thumbnails/45.jpg)
Steve Souders
@souders
stevesouders.com/docs/sfwebperf-webcomp-20140429.pptx