- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-11-05T00:37:29+00:00","default:admin","admin")
#author("2019-11-05T00:55:16+00:00","default:admin","admin")
-[[ブラウザ動作の理解-リフローとリペイント及びその最適化:http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/reflow-and-repaint-in-browser/]]
-[[[ブラウザ] 強制的にリフローとリペイントを発生させる方法:https://qiita.com/kymmt@github/items/b9dee5aa0fe6b6f876c2]]
-[[Reflowを制するものはDOMを制す:https://qiita.com/jkr_2255/items/5cdead4ee7fa289bfeed]]
-[[駆け出しエンジニアが受けたフロントエンドのコードレビューをさらす:https://qiita.com/shibadog39/items/d62ab56c06c4e46a2de7]]
-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();