Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HOW
AMP WORKS?
TaiHoon Kim(NAVER)
kishu@navercorp.com
about me
TaiHoon Kim kishu@navercorp.com
NAVER Front-End Platform
SADI HTML5 invited professor

NHN NEXT WebUI Basic adjun...
AMP?
Bench-marking
How AMP works?
AMP Inside
AGENDA
AMP?
ACCELLERATED MOBILE PAGES by Google
ウェブページをもっと早くレンダリングするための技術

パフォーマンス向上のためのグーグルの経験に基づいたベストプラクティス
AMPs are just Web Pages!
AMP HTML
拡張可能な HTML : AMP 拡張タグとプロパーティ
AMP 拡張タグを使って<amp-carousel> などのコンポーネント利
⽤AMP 拡張タグはカスタムエレメント基盤のウェブコンポーネント
パフォーマンスのための制...
amp.js
AMP ページとリソースのライフサイクル及びレンダリングタイム制御
AMP カスタムエレメント実装コード
ウェブページのパフォーマンス向上のため
のベストプラクティス
AMP は外部の JS を許可してない。
カスタム JS は ...
AMP STYLE = CSS
外部のスタイル、インラインスタイルは許可しない
ドキュメントに注⼊する形のインラインスタイルは使⽤可能
最⼤ 50KB まで許可
例
Naver モバイルメインページ - 合計 2つのファイルで約 100KB
N...
AMP コンポーネントを使って HTML を作成し
AMP JS をロードすることで
ウェブページの⾼速レンダリングを保証
+ グーグル検索結果で即時ロード
+ グーグル CDN キャッシュ
HELLO AMP!!!
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="cano...
AMP COMPONENTS
/* AMP 基本コンポーネント - イメージ */
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
/*A...
AMP EXTENDED COMPONENT
... 35 more
AMP-CAROUSEL
/* AMP 拡張コンポーネント - カルーセル */
<amp-carousel width=300 height=400>
<amp-img src="my-img1.png" width=300 height=4...
AMP EXTENDED COMPONENT
/* AMP コンポーネント - lightbox */
<amp-image-lightbox id="lightbox1"
layout="nodisplay">
</amp-image-lig...
AMP EXTENDED COMPONENT
/* AMP コンポーネント - サイドバー */
<amp-sidebar id='sidebar'
layout="nodisplay"
side="right"> ...
AMP ベンチマーク
NAVAR TV芸能
AMP プロトタイピング
AMP ベンチマークイシュー
動画
動作する。ただし URL は https
placeholder ⽤のイメージが必要
JS
カスタム JS は使えない。コメントと TOP ボタンが動作しない
sandbox iframe で実装しようともし...
AMP ベンチマーク TIMELINE
localhost で

network throttling 4Mb↓, 3Mb↑, 20ms RTT に設定
AMP ベンチマーク NETWORK
AMP 未適応
AMP ベンチマーク NETWORK
AMP 適応
画⾯に表⽰されるリソースを先にダウンロード
スクロースの外側のリソースは順次に遅延ロード
HOW AMP
SPEEDS UP
PERFORMANCE
How AMP Speeds Up Performance
⾮同期スクリプトのみ許可
ページのレンダリングを遮断する JS 防⽌
AMP JS 以外の他の JS も許可しない
全てのリソースのサイズ指定
リソースをダウンロードせずにサイズと位置...
How AMP Speeds Up Performance
3rd Party JS をクリティカルパースから除外
3rd Party JS は sandbox iframe の内部だけ許可
親ページの実⾏を遮断しなくて性能に影響しない
CSS...
How AMP Speeds Up Performance
スタイル再計算の最⼩化
不必要なレイアウト防⽌のため、先に測定をして変更を後に処理
フレーム毎スタイルので⼀度だけ再計算できるように保証
GPU 加速アニメーションのみ実⾏
ページのレ...
How AMP Speeds Up Performance
リソーツのロード順番を制御
ダウンロードするリソースの優先順位を計算
重要なリソースからダウンロード
ページの即時ロード
preconnect API
取得するページをビューポート分だ...
INSIDE OF AMP
AMP: CUSTOM ELEMENTS
export function registerElement(win, name, implementationClass) {
knownElements[name] = implementatio...
AMP: CUSTOM ELEMENTS
Custom Element
BaseElement HTMLElement.prototype
AmpImg ElementProto
this.implementation_ = 

new Amp...
新しい HTML タイプを定義し

ライフサイクルを制御
createdCallback カスタムエレメントの登録する時に発⽣
attachedCallback カスタムエレメントを DOM に追加する時に発⽣
detachedCallback カスタムエレメントを DOM から削除する時に発⽣
at...
firstAttachedCallback カスタムエレメントの最初の DOM に追加する時に発⽣
buildCallback カスタムエレメントと⼦エレメントが使⽤可能になった時に発⽣
layoutCallback AMP がカスタムエレメン...
AMP: FSM(Finite-State Machine)
AMPはコンポーネントの条件によって⼀つの状態をもつ
条件が変わると別の状態に変わる
状態が変わるとそれに伴うアクションを実⾏する
OFF ON
turn on
turn off
AMP: FSM(Finite-State Machine)
prerender
paused
inactive
doPass
unload
resume
doPass
doPass
doPass
doPass
doPassdoPass
doP...
AMP: FSM(Finite-State Machine)
doPass = discoverWork + work
applySizesAndMediaQuery
discoverWork
measure
scheduleLayoutOrP...
AMP: FSM(Finite-State Machine)
applySizesAndMediaQuery
メディアクエリを適応して AMP サイズ関連の属性をパース
measure
リソースのサイズと位置を測定。リソースは READY_FO...
AMP: FSM(Finite-State Machine)
calcTaskScore
スケジューリングした Job の優先順位を計算
1) どの AMP カスタムエレメントなのか? 2) どんな作業なのか? 3) ビューポートはどれくらい近...
AMP: SINGLE PASS PROCESS
class Pass {
constructor(win, handler, opt_defaultDelay) {
this.handler_;
this.defaultDelay_;
thi...
AMP: PROMISE
initialize src
call layoutComplete
AMP: OPTIMIZATION REFLOW
Reflow
Width と Height などエレメントの幾何学的構造に影響する属性を変更すると
該当エレメントのサイズを位置をまた計算
エレメントの変更が影響する他のエレメントのサイズと位置...
AMP: OPTIMIZATION REFLOW
枠の厚さを変更し⾼さを変更する場合
厚さ変更 → Reflow → Repaint→ ⾼さ変更→ Reflow → Repaint
厚さ変更 Job を保存 → ⾼さ変更 Job 保存 → 保存...
AMP: OPTIMIZATION REFLOW
エレメントのサイズ、位置、スクロールに関連した
スタイル属性をリクエストすると?
ブラウザはリクエストしたスタイルの属性を値を正確に計算するために
保存されていた変更作業を実⾏し Reflow、...
AMP: OPTIMIZATION REFLOW
// measure - (保存された Job があると) Reflow 発生
var h1 = element1.clientHeight;
// mutate - 変更 Job 保存
ele...
AMP: OPTIMIZATION REFLOW
// measure
var h1 = element1.clientHeight; // (保存された Job があると) 発生
var h2 = element2.clientHeight;...
NO batching DOM read/write operations
batching DOM read/write operations
AMP: OPTIMIZATION REFLOW
class Vsync {
..
..
mutate(mutator) { ... }
measure(measurer) { ... }
run(task, opt_state) { ... ...
AMP: OPTIMIZATION REFLOW
for (let i = 0; i < tasks.length; i++) {
if (tasks[i].measure) {
tasks[i].measure(states[i]);
}
}...
AMP: OPTIMIZATION REFLOW
THANK YOU
How AMP Work?
How AMP Work?
How AMP Work?
How AMP Work?
How AMP Work?
How AMP Work?
Upcoming SlideShare
Loading in …5
×

2

Share

Download to read offline

How AMP Work?

Download to read offline

How AMP Works?

Related Books

Free with a 30 day trial from Scribd

See all

How AMP Work?

  1. 1. HOW AMP WORKS? TaiHoon Kim(NAVER) kishu@navercorp.com
  2. 2. about me TaiHoon Kim kishu@navercorp.com NAVER Front-End Platform SADI HTML5 invited professor
 NHN NEXT WebUI Basic adjunct professor Project Management Professional(PMP) Front-End Development Group Sysop http://facebook.com/groups/webfrontend
  3. 3. AMP? Bench-marking How AMP works? AMP Inside AGENDA
  4. 4. AMP? ACCELLERATED MOBILE PAGES by Google ウェブページをもっと早くレンダリングするための技術
 パフォーマンス向上のためのグーグルの経験に基づいたベストプラクティス
  5. 5. AMPs are just Web Pages!
  6. 6. AMP HTML 拡張可能な HTML : AMP 拡張タグとプロパーティ AMP 拡張タグを使って<amp-carousel> などのコンポーネント利 ⽤AMP 拡張タグはカスタムエレメント基盤のウェブコンポーネント パフォーマンスのための制約 : <img> は <amp-img> を使うなど
  7. 7. amp.js AMP ページとリソースのライフサイクル及びレンダリングタイム制御 AMP カスタムエレメント実装コード ウェブページのパフォーマンス向上のため のベストプラクティス AMP は外部の JS を許可してない。 カスタム JS は sandbox iframe で使える。
  8. 8. AMP STYLE = CSS 外部のスタイル、インラインスタイルは許可しない ドキュメントに注⼊する形のインラインスタイルは使⽤可能 最⼤ 50KB まで許可 例 Naver モバイルメインページ - 合計 2つのファイルで約 100KB Naver モバイルニュースホーム - 合計 2つのファイルで約 67KB Naver モバイルニュースエンド - 合計 8つのファイルで約 50KB <style amp-custom> /* any custom style goes here */ body { background-color: white; } amp-img { background-color: gray; border: 1px solid black; } </style>
  9. 9. AMP コンポーネントを使って HTML を作成し AMP JS をロードすることで ウェブページの⾼速レンダリングを保証 + グーグル検索結果で即時ロード + グーグル CDN キャッシュ
  10. 10. HELLO AMP!!! <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{ ... }</style> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>
  11. 11. AMP COMPONENTS /* AMP 基本コンポーネント - イメージ */ <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img> /*AMP 基本コンポーネント - 動画 */ <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4" poster="myvideo-poster.jpg"> </amp-video> amp-ad amp-embed amp-img amp-pixel amp-video
  12. 12. AMP EXTENDED COMPONENT ... 35 more
  13. 13. AMP-CAROUSEL /* 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> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  14. 14. AMP EXTENDED COMPONENT /* AMP コンポーネント - lightbox */ <amp-image-lightbox id="lightbox1" layout="nodisplay"> </amp-image-lightbox>
  15. 15. AMP EXTENDED COMPONENT /* AMP コンポーネント - サイドバー */ <amp-sidebar id='sidebar' layout="nodisplay" side="right"> ...
  16. 16. AMP ベンチマーク NAVAR TV芸能 AMP プロトタイピング
  17. 17. AMP ベンチマークイシュー 動画 動作する。ただし URL は https placeholder ⽤のイメージが必要 JS カスタム JS は使えない。コメントと TOP ボタンが動作しない sandbox iframe で実装しようともしたが、セキュリティ問題など発⽣ nClick は amp-analytics で対応できるかリサーチが必要 外部 CSS ロードを許可しない HTML ヘッダーにスタイル注⼊ 4KB HTML エレメントにインラインスタイルは許可しない
  18. 18. AMP ベンチマーク TIMELINE localhost で
 network throttling 4Mb↓, 3Mb↑, 20ms RTT に設定
  19. 19. AMP ベンチマーク NETWORK AMP 未適応
  20. 20. AMP ベンチマーク NETWORK AMP 適応 画⾯に表⽰されるリソースを先にダウンロード スクロースの外側のリソースは順次に遅延ロード
  21. 21. HOW AMP SPEEDS UP PERFORMANCE
  22. 22. How AMP Speeds Up Performance ⾮同期スクリプトのみ許可 ページのレンダリングを遮断する JS 防⽌ AMP JS 以外の他の JS も許可しない 全てのリソースのサイズ指定 リソースをダウンロードせずにサイズと位置を計算してレイアウトしておく 拡張コンポーネントをレンダリングを遮断せずに実⾏可能 追加で HTTP リクエストはあるかもしれないが、ページのレイアウトとレ ンダリングは遮断しない
  23. 23. How AMP Speeds Up Performance 3rd Party JS をクリティカルパースから除外 3rd Party JS は sandbox iframe の内部だけ許可 親ページの実⾏を遮断しなくて性能に影響しない CSS は HTML 内部スタイルシートのみ許可しサイズを制限 HTML ページの内部に style タグを⼊れて使⽤ スタイルシートのサイズは 50KB までに制限 Web フォントを効率的にダウンロード ブラウザを遮断する HTTP リクエストが発⽣いないように Web フォントをダウン ロード
  24. 24. How AMP Speeds Up Performance スタイル再計算の最⼩化 不必要なレイアウト防⽌のため、先に測定をして変更を後に処理 フレーム毎スタイルので⼀度だけ再計算できるように保証 GPU 加速アニメーションのみ実⾏ ページのレイアウトが発⽣しない CSS アニメーションのみ使⽤ transform, opacity
  25. 25. How AMP Speeds Up Performance リソーツのロード順番を制御 ダウンロードするリソースの優先順位を計算 重要なリソースからダウンロード ページの即時ロード preconnect API 取得するページをビューポート分だけインポート
  26. 26. INSIDE OF AMP
  27. 27. AMP: CUSTOM ELEMENTS export function registerElement(win, name, implementationClass) { knownElements[name] = implementationClass; win.document.registerElement(name, { prototype: createAmpElementProto(win, name), }); } src/custom-element.js export function installImg(win) { registerElement(win, 'amp-img', AmpImg); } builtins/amp-img.js
  28. 28. AMP: CUSTOM ELEMENTS Custom Element BaseElement HTMLElement.prototype AmpImg ElementProto this.implementation_ = 
 new AmpImg(); AMP Components = HTML Custom Elements
  29. 29. 新しい HTML タイプを定義し
 ライフサイクルを制御
  30. 30. createdCallback カスタムエレメントの登録する時に発⽣ attachedCallback カスタムエレメントを DOM に追加する時に発⽣ detachedCallback カスタムエレメントを DOM から削除する時に発⽣ attributeChangedCallback カスタムエレメントの属性を追加、修正、削除する時に発⽣ AMP: CUSTOM ELEMENT Lifecycle Callbacks
  31. 31. firstAttachedCallback カスタムエレメントの最初の DOM に追加する時に発⽣ buildCallback カスタムエレメントと⼦エレメントが使⽤可能になった時に発⽣ layoutCallback AMP がカスタムエレメントをレンダリングする時に発⽣ viewportCallback カスタムエレメントがビューポートに⼊る時と出る時に発⽣ documentInactiveCallback ドキュメントをアンロードする前に発⽣ AMP: CUSTOM ELEMENT AMP's Extended Lifecycle Callbacks
  32. 32. AMP: FSM(Finite-State Machine) AMPはコンポーネントの条件によって⼀つの状態をもつ 条件が変わると別の状態に変わる 状態が変わるとそれに伴うアクションを実⾏する OFF ON turn on turn off
  33. 33. AMP: FSM(Finite-State Machine) prerender paused inactive doPass unload resume doPass doPass doPass doPass doPassdoPass doPass doPass doPass paused paused unload unload doPass doPassvisible hidden
  34. 34. AMP: FSM(Finite-State Machine) doPass = discoverWork + work applySizesAndMediaQuery discoverWork measure scheduleLayoutOrPreload setInViewport calcTaskScore peek startLayout work
  35. 35. AMP: FSM(Finite-State Machine) applySizesAndMediaQuery メディアクエリを適応して AMP サイズ関連の属性をパース measure リソースのサイズと位置を測定。リソースは READY_FOR_LAYOUT 状態になる scheduleLayoutOrPreload ビューポートを拡張した特定領域内のリソースをレイアウトするための Job スケジューリング setInViewport リソースがビューポートの内にあるのか外にあるのかを計算し viewportCallback を実⾏ discoverWork
  36. 36. AMP: FSM(Finite-State Machine) calcTaskScore スケジューリングした Job の優先順位を計算 1) どの AMP カスタムエレメントなのか? 2) どんな作業なのか? 3) ビューポートはどれくらい近いのか? peek 優先順位が最も⾼い Job を選択 startLayout 選択した Job の対象リソースを LAYOUT_SCHEDULED 状態に変更しレイアウトを開始 例えば、リソースが amp-img だとすると src 属性にイメージを指定することでレイアウト可能 work
  37. 37. 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(); } // 実⾏する Job を Pass に登録 new Pass(this.win, () => this.doPass_()); // Job Queue の最後の実⾏時間を元に次の実⾏時間を計算 let nextPassDelay = (now - this.exec_.getLastDequeueTime()) * 2; nextPassDelay = Math.max(Math.min(30000, nextPassDelay), 5000);
  38. 38. AMP: PROMISE initialize src call layoutComplete
  39. 39. AMP: OPTIMIZATION REFLOW Reflow Width と Height などエレメントの幾何学的構造に影響する属性を変更すると 該当エレメントのサイズを位置をまた計算 エレメントの変更が影響する他のエレメントのサイズと位置もまた計算 Reflow は Repaint を発⽣させるので できるだけ Reflow と Repaint を少なくする⽅がいい
  40. 40. AMP: OPTIMIZATION REFLOW 枠の厚さを変更し⾼さを変更する場合 厚さ変更 → Reflow → Repaint→ ⾼さ変更→ Reflow → Repaint 厚さ変更 Job を保存 → ⾼さ変更 Job 保存 → 保存された Job 実⾏ → Reflow → Repaint ブラウザは変更作業を集めて必要な時に実⾏
  41. 41. AMP: OPTIMIZATION REFLOW エレメントのサイズ、位置、スクロールに関連した スタイル属性をリクエストすると? ブラウザはリクエストしたスタイルの属性を値を正確に計算するために 保存されていた変更作業を実⾏し Reflow、Repaint する スタイル属性をリクエストする時には不必要な Reflow が発⽣しないように
  42. 42. AMP: OPTIMIZATION REFLOW // measure - (保存された Job があると) Reflow 発生 var h1 = element1.clientHeight; // mutate - 変更 Job 保存 element1.style.height = (h1 * 2) + 'px'; // measure - Reflow 発生 var h2 = element2.clientHeight; // mutate - 変更 Job 保存 element2.style.height = (h2 * 2) + 'px'; // measure - Reflow 発生 var h3 = element3.clientHeight; // mutate - 変更 Job 保存 element3.style.height = (h3 * 2) + 'px';
  43. 43. AMP: OPTIMIZATION REFLOW // measure var h1 = element1.clientHeight; // (保存された Job があると) 発生 var h2 = element2.clientHeight; // 保存された Job なし var h3 = element3.clientHeight; // 保存された Job なし // mutate element1.style.height = (h1 * 2) + 'px'; // 変更Job 保存 element2.style.height = (h2 * 2) + 'px'; // 変更Job 保存 element3.style.height = (h3 * 2) + 'px'; // 変更Job 保存
  44. 44. NO batching DOM read/write operations
  45. 45. batching DOM read/write operations
  46. 46. AMP: OPTIMIZATION REFLOW class Vsync { .. .. mutate(mutator) { ... } measure(measurer) { ... } run(task, opt_state) { ... } .. .. }
  47. 47. 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]); } }
  48. 48. AMP: OPTIMIZATION REFLOW
  49. 49. THANK YOU
  • sachirouinoue

    Jan. 18, 2017
  • charlier-shoe

    Jan. 18, 2017

How AMP Works?

Views

Total views

1,509

On Slideshare

0

From embeds

0

Number of embeds

29

Actions

Downloads

7

Shares

0

Comments

0

Likes

2

×