フローとリフローの違いを徹底解説！ウェブ描画のしくみを中学生にもわかる言葉で

---

はじめに：フローとリフローの基本をおさえる

人の体の中の動きと同じように、ウェブの世界でも文字や画像は「表示される順番」と「表示される大きさ」が絡み合って動きます。フローとリフローはその動きの鍵になる言葉です。
フローは「文書の流れ」に沿って要素が並ぶ自然な配置のことを指します。言い換えると、段落が積み上がるように下へ伸びていく様子です。これに対してリフローはその配置をもう一度計算し直す作業、つまり「再描画のための全体の見直し」です。どちらもウェブを作るときに避けられない現象ですが、頻繁に起こると動作がつっかえたり、ページの表示が遅く感じることがあります。
このセクションでは、まずフローとリフローの基本的な考え方を、身近な例でやさしく説明します。ウェブの画面は私たちが文字を打つたびに勝手に広がるわけではなく、まず情報が入ってきてから、実際の表示を決める長い計算が走ります。その計算の流れの中で、フローとリフローがどう関係しているのかを理解することが大切です。
ここでのポイントは、サイズや表示の変化があるときにリフローが起き、どのくらいの範囲に影響が出るかを知ることです。例えばテキストの大きさを変えたり、画像を追加したり、ウィンドウの幅を狭くしたりすると、要素同士の距離や高さが変わってしまいます。これがリフローの引き金になります。
中学生のみなさんも、これを知っていればウェブを見るときの“どうして動くのか”という疑問が減ります。私たちが日常で使うブラウザは、表示をきれいに保つために何度も計算を繰り返してくれています。その背後にはフローとリフローという二つの大切な仕組みがあるのです。

フローとリフローの違いを理解する具体的なポイント

ここでは違いをもう少し現実的な観点から整理します。まずフローは「通常の流れ」で、文章が左から右へ、上から下へと自然に配置される状態を指します。文書の構造が崩れなければ、フロー自体はそれほど再計算を起こしません。しかし新しい要素を追加したり、CSSの属性を変えたりすると、どの部分が伸びてどこが縮むかをブラウザが計算します。これがいわゆるリフローの準備です。
リフローは巨大になることがある作業です。たとえば行間を広くしたり、フォントサイズを大きくしたりすると、文章全体の高さが変わります。すると画面内の他の要素にも影響が及ぶため、ブラウザは多くの場所を再計算します。再計算の範囲が広いほど時間がかかり、動作が遅く感じることがあります。したがってウェブ制作では、リフローを減らす工夫がパフォーマンス改善につながります。たとえば一度にまとめてサイズを変える、スタイルの変更をまとめて適用する、DOMを頻繁にいじらない、文字サイズを一括で変えられるように設計する、などの工夫が有効です。
次に覚えておきたいポイントは「変化の影響範囲」です。ある場所を変更すると、その影響は隣接する要素だけでなく多くの部分へ波及することがあるのです。例えばボックスの幅を広げると、周りの要素が下にずれたり、余白が増えたりします。こんなとき、リフローは避けられませんが、影響範囲を絞ることができれば処理コストを抑えられます。最後に実務的なコツをひとつ。変更を最小限に抑え、可能な限り事前に計画を立ててから適用するとよいです。すなわち、CSS設計の段階でどの部分がブロックの大きさや配置に影響を与えるかを予測し、変更を分割して適用することが大きな違いを生みます。

ピックアップ解説

ねえ、フローとリフローの話、友だちにどう伝えるといいかな？実はリフローは式の計算が多い作業で、発生すると画面全体が重くなることがあるんだ。だから私たちはコードを書くとき、変更をまとめて適用する工夫を心がける。例として、スタイルを一度に変える、JavaScriptでDOMを一度だけ触る、サイズ変更はウィンドウイベントでまとめて行う、など。こうしておくと、毎回の表示更新が軽くなって、快適に見えるんだ。

---