以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

Nicole Sullivan「再フロー＆再描画：Javascriptを重くするCSS」

斜め読み

Yahoo!のNicole Sullivanの2009.3.27のブログエントリ

Reflows & Repaints: CSS Performance making your JavaScript slow?

ウェブページのパフォーマンスを遅くさせるCSSの使い方。およびその回避策がテーマ
再フロー＆再描画をどうやって減らすか。
TIPSは6つ紹介されてる。が、javascriptを書かないCSS書きに関係するのは、5〜6番目の

  • table要素は特殊。固定レイアウトアルゴリズムでレンダリングされるようにしろ。
  • MS独自仕様のcss expression使うな。

のみ。

以下斜め読んだまとめ。
  • Operaの記事「Efficient JavaScript」によると再描画と再フローがjsが重くなるのに影響してる
  • 同僚のStoyan Stefanovと一緒にこの問題の定量化に取組中
  • 再描画と再フロー
    • 再描画はページレイアウトに影響与えず、見た目が変更。
      • outline,visibility,background colorプロパティの変更時など。
    • 再フローはレイアウトに影響与える。
      • たいていの再フローは、再レンダリングが必要になる。
      • パフォーマンス改善のためには再フローの回避が必要
      • 再フローを引き起こす要因
  • CSSが再フローの原因になるときがある。
    • 以下CSSに絞ってtips紹介
    • tips1:class名変更はDOMツリーのできるだけ末端で
      • 再フローの範囲を最小限にするのが狙い。
    • tips2:styleプロパティ使わない。CSSセレクタでスタイルを与える
      • 要素へのスタイル適用にstyleプロパティを使うとwidth、height、etc..と指定したいプロパティの数だけstyleプロパティへのアクセスが増える。再フローが増える。
      • CSSセレクタ（classとかid）でスタイルを作り、適用したい要素へclassを追加すれば、再フローは1回で済む。
      • 表示されてる要素のDOM操作は重くなる。まずフラグメントに処理を与えて最後にappendすれば、リフローは1回で済む。これと同じ発想。
    • tips3:動く要素はpositionプロパティを"fixed"か"absolute"に。
      • "position:fixed;"or"position:absolute;"が指定された要素は他の要素のレイアウトに影響与えない。動いても再フロー発生しない。
      • 再描画は当然発生する。が、再フローは生じない。
    • tips4:滑らかさと速度はトレードオフ。なので時には妥協
      • 1pxごとに動くアニメーションよりも3pxごとに動くアニメーションの方が、CPUへの負担は少ない
    • tips5:テーブルレイアウト禁止（or "table-layout"プロパティは"fixed"指定しとく）
      • table要素は固定レイアウトアルゴリズムでレンダリングされるようにする
        • table要素には自動レイアウトアルゴリズムと固定レイアウトアルゴリズムがある。
        • 自動レイアウトアルゴリズムでは、table要素は内包する全ての子要素（td要素）の読み込み後にレンダリングされる
      • "table-layout:fixed;"を指定すれば、固定レイアウトアルゴリズムになる。
    • tips6:CSS expression使うな
    • MS謹製で、CSSセレクター内にjavascriptを書ける。
    • "width: expression( document.body.clientWidth < 600 ? "600px" : "auto" );"
    • 関係ないところで呼び出しや評価が起こり、回数も数千回とか半端ない。
  • futher study

あとで書く

コメント欄
    • WebKitのDave Hyattや"High Performance Web Sites"のSteve Soudersとか登場してる。
    • tip2と同じ効果のある代案
      • cssTextプロパティを使えば、一括で要素のスタイルを書き換えできる。

Efficient JavaScript

MARK 'TARQUIN' WILTON-JONESの2006.11.02のエントリ。dev.opera.comで公開されてる。
翻訳されてる
再描画と再フローについて簡潔な説明がある。わかりやすい。
以下斜め読んだところを箇条書き。

  • 再描画
    • 表示されていないものが表示されるとき（またはその逆）に起こる。
    • 文書のレイアウト変更は発生しない。
    • ボーダー（の表示・非表示）
    • 背景色の変化
    • visibilityプロパティの変更
  • 再フロー
    • 再描画よりも重要な変更
    • 再フローの原因
      • DOMツリー操作
      • 文書のレイアウトを変えるスタイルの変更
      • classNameプロパティの変更
      • ブラウザウィンドウのリサイズ
    • 再フローで起こること
      • DOMツリー上のある要素の変更
      • 子要素。これもレイアウト変更される
      • 兄弟関係にある要素。配置が再計算されて再配置される
      • 親要素・祖先要素。子要素・子孫要素のレイアウト変更を受けて再配置される。
      • 最終的には、ページ内の全ての要素が再描画される
Notes on HTML Reflow

by Chris Waterson＠mozilla.org
斜め読みできない。歯が立たない。