JavaScript/画面再描画の変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/画面再描画へ行く。
JavaScript/画面再描画の差分を削除

#author("2019-11-05T00:52:30+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();

JavaScript/画面再描画 の変更点

JavaScript/画面再描画の変更点