• Reflow ... 各HTML要素を解釈して、それぞれが占めるスペースを算出する
  • Repaint ... 算出したスペースのなかに、内容を描画していく
  • Reflowは「表示すべきものの配置が変わる」ことをきっかけとして発生する。
  • 配置が変わる例
    • 要素の追加・削除・更新
    • すでに存在する要素の、寸法や余白が変わり得るスタイル変更
    • windowサイズの変更やフォントサイズの変更、そしてスクロールなどの、ユーザーの操作
  • display: none （リフローとリペイント）、あるいは visibility: hidden （位置の変更は起きないので、リペイントのみ） による DOM ノードの見た目の変更
  • ページ中の DOM ノードの位置の移動やアニメーション
  • スタイル属性のちょっとした変更のためのスタイルシート追加
  • 実際にReflowが起きるタイミング
    • フレーム更新の直前
    • JavaScriptから、寸法に関係するスタイル関係の値にアクセス（参照も含む）
  • Reflowを強制的に発生 
    function reflow(elem){
    console.log(elem.offsetHeight);
}
  • Repaintを強制的に発生 
    $(elem).hide().show();
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-11-05 (火) 09:55:16 (1627d)