Web Components презентация

Содержание

Слайд 1Web Components
@souders
stevesouders.com/docs/sfwebperf-20140429.pptx
flickr.com/photos/brenderous/4255550788

Слайд 2Web Components
souders@google.com
stevesouders.com/docs/sap-hpws-20140424.pptx

Слайд 3Web Components
souders@google.com
stevesouders.com/docs/sap-hpws-20140424.pptx

Слайд 5flickr.com/photos/brenderous/4255550788

Слайд 13bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100

Слайд 14flickr.com/photos/brenderous/4255550788

Слайд 15flickr.com/photos/countylemonade/5940567593

Слайд 16flickr.com/photos/thisisbossi/3069180895

Слайд 17SPOF
flickr.com/photos/darwinbell/465459020/

Слайд 18en.wikipedia.org/wiki/Single_point_of_failure

Слайд 19
Frontend SPOF

Слайд 20flickr.com/photos/runneralan/9741423581
scripts
stylesheets
fonts

Слайд 24flickr.com/photos/krhamm/171302038
sync

Слайд 25flickr.com/photos/8229345@N02/7980116331
async

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

Слайд 27https://www.flickr.com/photos/thisisbossi/3069180895

Слайд 29HTML Templates
Shadow DOM
HTML Imports
Custom Elements

Слайд 30HTML Templates
Shadow DOM
HTML Imports
Custom Elements

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

Слайд 33HTML Imports

navtiming.php:




function doNavTiming() {…

Слайд 34HTML Imports

navtiming.php:




function doNavTiming() {…

Слайд 35HTML Imports

navtiming.html:




function doNavTiming() {…}
flickr.com/photos/glynlowe/10039742285

Слайд 36insert imported HTML
var link = document. querySelector('link[rel=import]');
var content = link.import. querySelector('#navtiming-content');
document.getElementById('target').

appendChild(content.cloneNode(true));

Слайд 37






var link = document. querySelector('link[rel=import]');
var content

= link.import. querySelector('#navtiming-content');
document.getElementById('target'). appendChild(content.cloneNode(true));



Race Condition?

Слайд 38






var link = document. querySelector('link[rel=import]');
var content

= link.import. querySelector('#navtiming-content');
document.getElementById('target'). appendChild(content.cloneNode(true));



Race Condition!

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

Слайд 40flickr.com/photos/runneralan/9741423581
scripts
stylesheets
fonts
web components (new!)

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

Слайд 44HTML Templates
Shadow DOM
HTML Imports
Custom Elements

Слайд 45Custom Elements

navtimingce.php:

var NavTimingProto = Object.create(HTMLElement.prototype);
NavTimingProto.createdCallback = function(){
this.innerHTML =

""; };
document.registerElement('nav-timing', {prototype: NavTimingProto});
function doNavTiming() {…

MUST have hyphen!

Слайд 46insert custom element

That's it!

Слайд 47







Race Condition?

Слайд 48







Race Condition!

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

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

Слайд 51suggested fixes
"lazyload" attribute
"elements" attribute
make LINK valid w/in BODY
flickr.com/photos/chudo1909/6979697127

Слайд 52HTML Imports block rendering
workarounds (hacks) exist
need to change the spec
check your

site for Frontend SPOF

takeaways

Слайд 54Steve Souders
@souders
stevesouders.com/docs/sfwebperf-webcomp-20140429.pptx

Похожие презентации

Приоритетные направления развития инновационной инфраструктуры в сфере образования: проектное задание сети 242
Самостоятельная работа студентов 440
Профессиональное училище № 15 г. Волжска (отчет о практике) 297
Учеба – это не время. Учеба – это усилия 424
Методология научного исследования. Основания методологии науки. Эстетические основания методологии 516
Internet of Things 209

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика