編集部が選ぶ「みんなに見てほしい」イチオシまとめはこちら
2
Shuichi Ishikawa @spacelogue
Fast Performance with CSS on Mobileを聞きます。満員セッションです。 #maxjp
Shuichi Ishikawa @spacelogue
Layout: HTMLはDOMに、CSSはCSSOMになり、RenderTree→Layout→Paint という流れ #maxjp
Shuichi Ishikawa @spacelogue
layoutはやや、paintは一番コストがかかる。composite layers, match selectors to elementsはそんなにコストかからない。 #maxjp
Shuichi Ishikawa @spacelogue
1000 / 60fps = 16.6ms、この時間でJS, Layout, Painting, その他を16msで行う必要がある。 #maxjp
Shuichi Ishikawa @spacelogue
Frame Budget: DOM操作、JS実行、重いpaintなどで奪い合い #maxjp
Shuichi Ishikawa @spacelogue
モバイルは遅い。6〜10倍遅い。ネットワークも。 #maxjp
Shuichi Ishikawa @spacelogue
パララックスなど、スクロールはたいへん。#maxjp
Shuichi Ishikawa @spacelogue
パフォーマンスはChromeのTimeline + Frames viewで計測 #maxjp
Shuichi Ishikawa @spacelogue
Timelineに切り替えて、レコーディング開始。停止して、見る幅を変えて、詳しく見る。 #maxjp
Shuichi Ishikawa @spacelogue
Show paint rectanglesでpaintが起きている範囲を見る #maxjp
Shuichi Ishikawa @spacelogue
パララックスサイトはスクロールさせながらレコーディングする #maxjp
Shuichi Ishikawa @spacelogue
{ }というアイコンを押すと、jquery.min.jsを展開して表示できる。知らんかった! #maxjp
Shuichi Ishikawa @spacelogue
Nodes that need layoutも表示される。 #maxjp
Shuichi Ishikawa @spacelogue
緑の長いバーは、paintに時間がかかっているところ。これをなんとかしないといけない。 #maxjp
Shuichi Ishikawa @spacelogue
スクロールすると、Heavy imagery will bust the GPU memory / Heavy paints / Full page repaints #maxjp
Shuichi Ishikawa @spacelogue
http://t.co/y1nYUTbUgj を例に、高コストのCSSプロパティを知る。 #maxjp
Shuichi Ishikawa @spacelogue
高いコストのCSSプロパティ: position:fixed, fixed background, border-radius&box-shadow, bg-size, @font-face, grandiants, text-align #maxjp
Shuichi Ishikawa @spacelogue
Enable continuous page repaintingをONにすると再描画にかかっている時間がみえる #maxjp
Shuichi Ishikawa @spacelogue
box-shadowとborder-radiusの両方のCSSプロパティを使ったときだけ、とても遅くなる。 #maxjp
残りを読む(6)
ログインして広告を非表示にする
ログインして広告を非表示にする