【新機能】作り忘れたまとめはありませんか?31日前まで期間指定してまとめが作れる高度な検索ができました。有料APIだからツイートの漏れはありません!
このまとめをお気に入りにして応援しよう!
0
ログインして広告を非表示にする
Shuichi Ishikawa @spacelogue 2013-05-09 00:00:32
いよいよMAX最終日。ロサンゼルスは朝8時、Optimizing Browser Renderingを聞きます。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:03:45
パフォーマンス最適化のためには、ブラウザがどう動いているか理解することが必要。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:05:08
Webkit-based renderingについて話すけど、IEでもいきる話。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:07:37
Parsing: HTMLはvalidateしよう。パーサーに余計な推測の処理をさせないように。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:09:26
Waterfall: ブラウザは他の必要なCSS, Scriptファイルを並列でロードする。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:10:21
CSS: デフォルトのスタイルシート、インライン、外部CSSからツリーをつくる #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:10:52
DOM TreeとStyle構造から、Render Treeが作られる #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:15:51
CSSスタイルは、あとで使いやすいように、さまざまなn対1のmaps(buckets)に格納される。Tag, ID, Class。この検索コストを下げるようにしないといけない。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:17:58
ClassセレクタのあとのIDセレクタはかなり速い。でもp.myClass table#thingyは? #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:19:22
子孫セレクタと、子セレクトは避けるべき。人間がよみやすい範囲で。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:20:18
Caveats: スタイルが入れ子になっていたらどうなるか。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:25:56
DOMの操作はもっとも遅い処理の1つ。でも、色とか表示/非表示だけなら、Painting->Displayの処理だけで済む。サイズや位置を変更したら、Render Treeの構築からやり直し。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:29:32
その変更がTreeにどれくらいのインパクトがあるか意識しないといけない。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:31:23
Chromeのツールには、Paint Rectangles, Composited Layer Borders、Show FPS meterなどのオプションがある。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:33:06
赤い領域が大きくちかちかするようなら、全域を頻繁に書き換えていることになる。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:33:59
なるべく小さい範囲の再描画ですむように。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:39:22
画像にはwidth, heightの指定が必要。でもなぜ?Chrome ToolのTimelineを見ながら処理を記録して見てみよう。サイズ指定がないと、Paint->Composite Layersが何回か起こる。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:41:44
何か見せたくないとき、visibility / display noneのどちらを使えばいい? #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:45:45
visibilityはpaint処理しか起きない。display noneはrender treeから。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 00:54:42
cloneして変更して、replaceという手もある #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 01:01:47
外部CSSと外部Scriptの順序は?scriptタグを書く位置は重要。script deferも検討。 #maxjp
Shuichi Ishikawa @spacelogue 2013-05-09 01:03:49
英語が速くて、理解が追いつかなかったけど、結構いいこと言ってた。あとで復習する。 #maxjp

ブックマークしたタグ

あなたの好きなタグをブックマークしておこう!話題のまとめを見逃さなくなります。
ログインして広告を非表示にする
ログインして広告を非表示にする