AMP는 어떻게 빠른 성능을 내나.key

Size: px

Start display at page:

Download "AMP는 어떻게 빠른 성능을 내나.key"

수연 옹
6 years ago
Views:

1 AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈

2 AMP 란무엇인가?

3 AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게)

6 AMPs are just Web Pages!

7 AMPs are just Web Pages!

9 HELLO AMP!!! <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>hello, AMPs</title> <link rel="canonical" href=" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{... }</style> <script async src=" </head> <body> <h1>welcome to the mobile web</h1> </body> </html>

10 AMP COMPONENTS /* AMP - */ <amp-img src="welcome.jpg" alt="welcome" height="400" width="800"></amp-img> /*AMP - */ <amp-video width=400 height=300 src=" poster="myvideo-poster.jpg"> </amp-video> amp-ad amp-embed amp-img amp-pixel amp-video

11 AMP EXTENDED COMPONENT /* AMP - */ <amp-carousel width=300 height=400> <amp-img src="my-img1.png" width=300 height=400></amp-img> <amp-img src="my-img2.png" width=300 height=400></amp-img> <amp-img src="my-img3.png" width=300 height=400></amp-img> </amp-carousel> /* AMP - */ <amp-youtube data-videoid="mgenrkrdogy" layout="responsive" width="480" height="270"></amp-youtube> amp-accordion amp-analytics amp-carousel amp-facebook amp-list amp-sidebar amp-youtube amp-mustache more

12 AMP STYLE <style amp-custom> /* any custom style goes here */ body { background-color: white; } amp-img { background-color: gray; border: 1px solid black; } </style>

13 AMP VALIDATION

14 AMP 벤치마킹 repository

16 AMP 벤치마킹이슈

17 AMP 벤치마킹 TIMELINE

18 AMP 벤치마킹 NETWORK

19 AMP 벤치마킹 NETWORK

20 HOW AMP SPEEDS UP PERFORMANCE

21 How AMP Speeds Up Performance

22 How AMP Speeds Up Performance

23 How AMP Speeds Up Performance

24 INSIDE OF AMP

25 AMP: CUSTOM ELEMENTS builtins/amp-img.js export function installimg(win) { registerelement(win, 'amp-img', AmpImg); } src/custom-element.js export function registerelement(win, name, implementationclass) { knownelements[name] = implementationclass; } win.document.registerelement(name, { prototype: createampelementproto(win, name), });

26 AMP: CUSTOM ELEMENTS BaseElement HTMLElement.prototype AmpImg ElementProto this.implementation_ = new AmpImg(); Custom Element AMP Components = HTML Custom Elements

28 AMP: CUSTOM ELEMENT Lifecycle Callbacks createdcallback attachedcallback detachedcallback attributechangedcallback

29 AMP: CUSTOM ELEMENT AMP's Extended Lifecycle Callbacks firstattachedcallback buildcallback layoutcallback viewportcallback documentinactivecallback

30 AMP: FSM(Finite-State Machine) OFF ON

31 AMP: FSM(Finite-State Machine)

32 AMP: FSM(Finite-State Machine) dopass = discoverwork + work applysizesandmediaquery calctaskscore measure peek schedulelayoutorpreload startlayout setinviewport

33 AMP: FSM(Finite-State Machine) discoverwork applysizesandmediaquery measure schedulelayoutorpreload setinviewport

34 AMP: FSM(Finite-State Machine) work calctaskscore peek startlayout

35 AMP: SINGLE PASS PROCESS class Pass { constructor(win, handler, opt_defaultdelay) { this.handler_; this.defaultdelay_; this.scheduled_; this.nexttime; this.running_; } ispending(); schedule(opt_delay); cancel(); } new Pass(this.win, () => this.dopass_()); let nextpassdelay = (now - this.exec_.getlastdequeuetime()) * 2; nextpassdelay = Math.max(Math.min(30000, nextpassdelay), 5000);

36 AMP: PROMISE

37 AMP: OPTIMIZATION REFLOW

38 AMP: OPTIMIZATION REFLOW

39 AMP: OPTIMIZATION REFLOW

40 AMP: OPTIMIZATION REFLOW // measure - ( ) var h1 = element1.clientheight; // mutate - element1.style.height = (h1 * 2) + 'px'; // measure - var h2 = element2.clientheight; // mutate - element2.style.height = (h2 * 2) + 'px'; // measure - var h3 = element3.clientheight; // mutate - element3.style.height = (h3 * 2) + 'px';

41 AMP: OPTIMIZATION REFLOW // measure var h1 = element1.clientheight; //( ) var h2 = element2.clientheight; // var h3 = element3.clientheight; // // mutate element1.style.height = (h1 * 2) + 'px'; // element2.style.height = (h2 * 2) + 'px'; // element3.style.height = (h3 * 2) + 'px'; //

42 NO batching DOM read/write operations

43 batching DOM read/write operations

44 AMP: OPTIMIZATION REFLOW class Vsync {.... mutate(mutator) {... } measure(measurer) {... } run(task, opt_state) {... }.... }

45 AMP: OPTIMIZATION REFLOW for (let i = 0; i < tasks.length; i++) { if (tasks[i].measure) { tasks[i].measure(states[i]); } } for (let i = 0; i < tasks.length; i++) { if (tasks[i].mutate) { tasks[i].mutate(states[i]); } }

46 AMP: OPTIMIZATION REFLOW

47 AMP: CONCLUSION

48 THANK YOU

Ext JS À¥¾ÖÇÃ¸®ÄÉÀÌ¼Ç°³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇÃ¸®ÄÉÀÌ¼Ç°³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',