Adobe MAX 2013 - Optimizing Browser Rendering
-
clockmaker
- 1122
- 0
- 0
- 0
-
- いいね！0
Shuichi Ishikawa
@spacelogue
いよいよMAX最終日。ロサンゼルスは朝8時、Optimizing Browser Renderingを聞きます。 #maxjp
2013-05-09 00:00:32
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スタイルは、あとで使いやすいように、さまざまな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
DOMの操作はもっとも遅い処理の１つ。でも、色とか表示/非表示だけなら、Painting->Displayの処理だけで済む。サイズや位置を変更したら、Render Treeの構築からやり直し。 #maxjp
2013-05-09 00:25:56
Shuichi Ishikawa
@spacelogue
Chromeのツールには、Paint Rectangles, Composited Layer Borders、Show FPS meterなどのオプションがある。 #maxjp
2013-05-09 00:31:23
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
外部CSSと外部Scriptの順序は？scriptタグを書く位置は重要。script deferも検討。 #maxjp
2013-05-09 01:01:47