Презентация на тему High Performance Web Components

Презентация на тему High Performance Web Components, предмет презентации: Образование. Этот материал содержит 75 слайдов. Красочные слайды и илюстрации помогут Вам заинтересовать свою аудиторию. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций ThePresentation.ru в закладки!

Слайды и текст этой презентации

Слайд 1
Текст слайда:

High Performance Web Components

@souders
stevesouders.com/docs/html5devconf-webcomp-20140522.pptx

flickr.com/photos/brenderous/4255550788


Слайд 2
Текст слайда:

Web Components

souders@google.com
stevesouders.com/docs/sap-hpws-20140424.pptx


Слайд 3
Текст слайда:

Web Components

souders@google.com
stevesouders.com/docs/sap-hpws-20140424.pptx


Слайд 4

Слайд 5
Текст слайда:

flickr.com/photos/brenderous/4255550788


Слайд 6

Слайд 7

Слайд 8

Слайд 9

Слайд 10

Слайд 11

Слайд 12

Слайд 13
Текст слайда:

bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100


Слайд 14
Текст слайда:

flickr.com/photos/brenderous/4255550788


Слайд 15
Текст слайда:

flickr.com/photos/countylemonade/5940567593


Слайд 16
Текст слайда:

flickr.com/photos/thisisbossi/3069180895


Слайд 17
Текст слайда:

SPOF

flickr.com/photos/darwinbell/465459020/


Слайд 18
Текст слайда:

en.wikipedia.org/wiki/Single_point_of_failure


Слайд 19
Текст слайда:


Frontend SPOF


Слайд 20
Текст слайда:

flickr.com/photos/runneralan/9741423581

scripts
stylesheets
fonts


Слайд 21

Слайд 22

Слайд 23

Слайд 24
Текст слайда:

p(frontend SPOF)
= p(at least one 3rd party down)
= 1 – p(all 3rd party up)
= 1 – p(3rd party up)n

where
n = # of 3rd party JS, CSS, & fonts on the page

flickr.com/photos/mkamp/2478311790


Слайд 25
Текст слайда:

p(frontend SPOF)

example:
p(3rd party up) = 0.998 (17 hr/yr)
n = 10
p(frontend SPOF)
= 1 - p(3rd party up)n
= 1 - (0.998)10
= 1 – (0.98)
= 0.02 (7.2 days/yr)

flickr.com/photos/mkamp/2478311790


Слайд 26
Текст слайда:


bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100


Слайд 27
Текст слайда:

p(3rd party up)?

SLAs
99.9% - GA, Google Apps
99.95% - GAE, Amazon EC2
Uptime 2007-2012
99.93% - GoDaddy
99.86% - GitHub
99.67% - Google Apps
97.43% - AWS

flickr.com/photos/mkamp/2478311790

iwgcr.org/wp-content/uploads/2013/06/IWGCR-Paris.Ranking-003.2-en.pdf


Слайд 28
Текст слайда:

p(frontend SPOF)

flickr.com/photos/mkamp/2478311790

p(3rd party up)

p(frontend SPOF)

n

(days/year)


Слайд 29
Текст слайда:

flickr.com/photos/krhamm/171302038

sync


Слайд 30
Текст слайда:

flickr.com/photos/8229345@N02/7980116331

async


Слайд 31
Текст слайда:

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);


Слайд 32
Текст слайда:

https://www.flickr.com/photos/thisisbossi/3069180895


Слайд 33

Слайд 34

Слайд 35

Слайд 36
Текст слайда:

HTML Templates
Shadow DOM
HTML Imports
Custom Elements


Слайд 37
Текст слайда:

HTML Templates
Shadow DOM
HTML Imports
Custom Elements


Слайд 38
Текст слайда:

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


Слайд 39

Слайд 40
Текст слайда:

navtiming.php:




Слайд 41
Текст слайда:

navtiming.php:




Слайд 42
Текст слайда:

HTML Imports


navtiming.html:






Слайд 45
Текст слайда:











Слайд 46
Текст слайда:











Слайд 47
Текст слайда:











Слайд 48
Текст слайда:











Слайд 49
Текст слайда:










Race Condition?


Слайд 50
Текст слайда:










Race Condition!


Слайд 51
Текст слайда:

resolution: BLOCK

Chrome 33-34:
stop parsing at next SCRIPT tag
Chrome 36:
stop parsing immediately – entire BODY is blocked from rendering

flickr.com/photos/runneralan/9741423581


Слайд 52
Текст слайда:

flickr.com/photos/runneralan/9741423581

scripts
stylesheets
fonts
web components (new!)


Слайд 53

Слайд 54

Слайд 55
Текст слайда:

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);

flickr.com/photos/8229345@N02/7980116331


Слайд 56
Текст слайда:

HTML Templates
Shadow DOM
HTML Imports
Custom Elements


Слайд 57
Текст слайда:

Custom Elements


navtimingce.php:

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

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

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

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

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


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

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