編集可能
2013年5月9日

Adobe MAX 2013 - Optimizing Browser Rendering

Optimizing Browser Rendering
0
Shuichi Ishikawa @spacelogue

いよいよMAX最終日。ロサンゼルスは朝8時、Optimizing Browser Renderingを聞きます。 #maxjp

2013-05-09 00:00:32
Shuichi Ishikawa @spacelogue

パフォーマンス最適化のためには、ブラウザがどう動いているか理解することが必要。 #maxjp

2013-05-09 00:03:45
Shuichi Ishikawa @spacelogue

Webkit-based renderingについて話すけど、IEでもいきる話。 #maxjp

2013-05-09 00:05:08
Shuichi Ishikawa @spacelogue

Parsing: HTMLはvalidateしよう。パーサーに余計な推測の処理をさせないように。 #maxjp

2013-05-09 00:07:37
Shuichi Ishikawa @spacelogue

Waterfall: ブラウザは他の必要なCSS, Scriptファイルを並列でロードする。 #maxjp

2013-05-09 00:09:26
Shuichi Ishikawa @spacelogue

CSS: デフォルトのスタイルシート、インライン、外部CSSからツリーをつくる #maxjp

2013-05-09 00:10:21
Shuichi Ishikawa @spacelogue

DOM TreeとStyle構造から、Render Treeが作られる #maxjp

2013-05-09 00:10:52
Shuichi Ishikawa @spacelogue

CSSスタイルは、あとで使いやすいように、さまざまなn対1のmaps(buckets)に格納される。Tag, ID, Class。この検索コストを下げるようにしないといけない。 #maxjp

2013-05-09 00:15:51
Shuichi Ishikawa @spacelogue

ClassセレクタのあとのIDセレクタはかなり速い。でもp.myClass table#thingyは? #maxjp

2013-05-09 00:17:58
Shuichi Ishikawa @spacelogue

子孫セレクタと、子セレクトは避けるべき。人間がよみやすい範囲で。 #maxjp

2013-05-09 00:19:22
Shuichi Ishikawa @spacelogue

Caveats: スタイルが入れ子になっていたらどうなるか。 #maxjp

2013-05-09 00:20:18
Shuichi Ishikawa @spacelogue

DOMの操作はもっとも遅い処理の1つ。でも、色とか表示/非表示だけなら、Painting->Displayの処理だけで済む。サイズや位置を変更したら、Render Treeの構築からやり直し。 #maxjp

2013-05-09 00:25:56
Shuichi Ishikawa @spacelogue

その変更がTreeにどれくらいのインパクトがあるか意識しないといけない。 #maxjp

2013-05-09 00:29:32
Shuichi Ishikawa @spacelogue

Chromeのツールには、Paint Rectangles, Composited Layer Borders、Show FPS meterなどのオプションがある。 #maxjp

2013-05-09 00:31:23
Shuichi Ishikawa @spacelogue

赤い領域が大きくちかちかするようなら、全域を頻繁に書き換えていることになる。 #maxjp

2013-05-09 00:33:06
Shuichi Ishikawa @spacelogue

なるべく小さい範囲の再描画ですむように。 #maxjp

2013-05-09 00:33:59
Shuichi Ishikawa @spacelogue

画像にはwidth, heightの指定が必要。でもなぜ?Chrome ToolのTimelineを見ながら処理を記録して見てみよう。サイズ指定がないと、Paint->Composite Layersが何回か起こる。 #maxjp

2013-05-09 00:39:22
Shuichi Ishikawa @spacelogue

何か見せたくないとき、visibility / display noneのどちらを使えばいい? #maxjp

2013-05-09 00:41:44
Shuichi Ishikawa @spacelogue

visibilityはpaint処理しか起きない。display noneはrender treeから。 #maxjp

2013-05-09 00:45:45
Shuichi Ishikawa @spacelogue

cloneして変更して、replaceという手もある #maxjp

2013-05-09 00:54:42
Shuichi Ishikawa @spacelogue

外部CSSと外部Scriptの順序は?scriptタグを書く位置は重要。script deferも検討。 #maxjp

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

英語が速くて、理解が追いつかなかったけど、結構いいこと言ってた。あとで復習する。 #maxjp

2013-05-09 01:03:49

コメント

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