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
27. How AMP Speeds Up Performance
3rd Party JS をクリティカルパースから除外
3rd Party JS は sandbox iframe の内部だけ許可
親ページの実⾏を遮断しなくて性能に影響しない
CSS は HTML 内部スタイルシートのみ許可しサイズを制限
HTML ページの内部に style タグを⼊れて使⽤
スタイルシートのサイズは 50KB までに制限
Web フォントを効率的にダウンロード
ブラウザを遮断する HTTP リクエストが発⽣いないように Web フォントをダウン
ロード
28.
29. How AMP Speeds Up Performance
スタイル再計算の最⼩化
不必要なレイアウト防⽌のため、先に測定をして変更を後に処理
フレーム毎スタイルので⼀度だけ再計算できるように保証
GPU 加速アニメーションのみ実⾏
ページのレイアウトが発⽣しない CSS アニメーションのみ使⽤
transform, opacity
30. How AMP Speeds Up Performance
リソーツのロード順番を制御
ダウンロードするリソースの優先順位を計算
重要なリソースからダウンロード
ページの即時ロード
preconnect API
取得するページをビューポート分だけインポート
32. 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
33. AMP: CUSTOM ELEMENTS
Custom Element
BaseElement HTMLElement.prototype
AmpImg ElementProto
this.implementation_ =
new AmpImg();
AMP Components = HTML Custom Elements
52. 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]);
}
}
