Adobe MAX 2013 - Fast Performance with CSS on Mobile

まとめました。
2
Shuichi Ishikawa @spacelogue

Fast Performance with CSS on Mobileを聞きます。満員セッションです。 #maxjp

2013-05-09 02:57:11
Shuichi Ishikawa @spacelogue

Layout: HTMLはDOMに、CSSはCSSOMになり、RenderTree→Layout→Paint という流れ #maxjp

2013-05-09 03:06:39
Shuichi Ishikawa @spacelogue

layoutはやや、paintは一番コストがかかる。composite layers, match selectors to elementsはそんなにコストかからない。 #maxjp

2013-05-09 03:12:12
Shuichi Ishikawa @spacelogue

1000 / 60fps = 16.6ms、この時間でJS, Layout, Painting, その他を16msで行う必要がある。 #maxjp

2013-05-09 03:17:33
Shuichi Ishikawa @spacelogue

Frame Budget: DOM操作、JS実行、重いpaintなどで奪い合い #maxjp

2013-05-09 03:19:06
Shuichi Ishikawa @spacelogue

モバイルは遅い。6〜10倍遅い。ネットワークも。 #maxjp

2013-05-09 03:20:10
Shuichi Ishikawa @spacelogue

パララックスなど、スクロールはたいへん。#maxjp

2013-05-09 03:22:26
Shuichi Ishikawa @spacelogue

パフォーマンスはChromeのTimeline + Frames viewで計測 #maxjp

2013-05-09 03:24:29
Shuichi Ishikawa @spacelogue

Timelineに切り替えて、レコーディング開始。停止して、見る幅を変えて、詳しく見る。 #maxjp

2013-05-09 03:26:33
Shuichi Ishikawa @spacelogue

Show paint rectanglesでpaintが起きている範囲を見る #maxjp

2013-05-09 03:30:16
Shuichi Ishikawa @spacelogue

パララックスサイトはスクロールさせながらレコーディングする #maxjp

2013-05-09 03:34:28
Shuichi Ishikawa @spacelogue

{ }というアイコンを押すと、jquery.min.jsを展開して表示できる。知らんかった! #maxjp

2013-05-09 03:37:03
Shuichi Ishikawa @spacelogue

Nodes that need layoutも表示される。 #maxjp

2013-05-09 03:38:21
Shuichi Ishikawa @spacelogue

緑の長いバーは、paintに時間がかかっているところ。これをなんとかしないといけない。 #maxjp

2013-05-09 03:39:36
Shuichi Ishikawa @spacelogue

スクロールすると、Heavy imagery will bust the GPU memory / Heavy paints / Full page repaints #maxjp

2013-05-09 03:40:32
Shuichi Ishikawa @spacelogue

http://t.co/y1nYUTbUgj を例に、高コストのCSSプロパティを知る。 #maxjp

2013-05-09 03:47:05
Shuichi Ishikawa @spacelogue

高いコストのCSSプロパティ: position:fixed, fixed background, border-radius&box-shadow, bg-size, @font-face, grandiants, text-align #maxjp

2013-05-09 03:49:49
Shuichi Ishikawa @spacelogue

Enable continuous page repaintingをONにすると再描画にかかっている時間がみえる #maxjp

2013-05-09 03:51:33
Shuichi Ishikawa @spacelogue

box-shadowとborder-radiusの両方のCSSプロパティを使ったときだけ、とても遅くなる。 #maxjp

2013-05-09 03:54:45
残りを読む(6)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?