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