9

ブラウザで HTML/CSS を読み込んでページを描画した後、もし JavaScript によって動的に DOM が書き換わったら、ブラウザはページの再描画をしなくてはなりません。

素朴に考えるとページの描画にかかるコストは無視できません。DOM がちょっと変わっただけで要素のレイアウトが変わりえますし、テキストの折り返しが変わって更にレイアウトが変わることもありそうです。

しかし多くの場合、書き換えられる部分は HTML/CSS のコードで見るとごく一部です。したがって再描画時に全体を描き直すのではなく部分的に描き直すようなことをしていてもおかしくないと思うのですが、よく詳細を知りません。

ブラウザがページを再描画する際、どのようなアルゴリズムで行われているのでしょうか? どんな高速化があるのか箇条書きにする程度の粒度で教えて頂ければ幸いです。

補足:個人的に何となくイメージが付いたので回答を承認しておりますが、更に回答を投稿して他の最適化やもっと詳しいお話を教えて頂くことも大歓迎です :)

2 件の回答 2

7

基本的には、DOM, HTML, CSS の仕様に準拠する範囲で不要な処理をしない、の積み重ねです。

大まかには「DOM変更→スタイル計算→レイアウト→ペイント→コンポジション」というステップがあります。以下のような処理はどのブラウザエンジンもやっているのではないかと思います。

  • DOM変更が、表示されているDocumentのツリーに接続していない部分で起きたら、何もしない
  • 要素が挿入削除された場合、特定の結合子や擬似クラスが使用されていない場合、兄弟要素のスタイルを再計算する必要はない
  • display:none が付いた要素の子孫のスタイルは計算する必要がない
  • ある要素のレイアウトを再計算するとしても、別のレイアウトフローに属するツリーはレイアウトし直す必要はない (position:absolute はそれぞれ別のフロー)
  • スタイルの変更でボックスサイズに影響がないプロパティ(色やbox-shadowやら)だけが変更された場合、レイアウトせずにペイント以降をすればよい
  • レイヤーの場所やtransformだけが変更されてペイント結果がまだメモリ上にある場合、コンポジションだけやり直せば良い
2
  • +1: 読みやすく分かりやすかったです。コンポジションというのは、大きさが決まった各要素をそれぞれページに配置する作業という理解であっていますでしょうか?
    – nekketsuuu
    2019年1月24日 2:01
  • 2
    コンポジションは、ピクセルとして描かれた各レイヤーをGPUなどで合成する処理です。たとえば、opacityが1未満になった要素にはレイヤーが割り当てられ、GPUが透過処理を加えつつ他のレイヤーと合成して画面に出力します。
    – int32_t
    2019年1月28日 2:30
2

ブラウザの仕組み: 最新ウェブブラウザの内部構造 https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#Dynamic_changes

の ”動的な変更” に説明があります
以下 ブラウザの仕組み: 最新ウェブブラウザの内部構造からの引用です。

動的な変更
ブラウザでは、変更に対応して最小限の操作を実行しようとします。そのため、要素の色が変更された場合は、その要素の再描画のみを行います。要素の位置が変更された場合は、要素とその子や兄弟のレイアウトと再描画を行います。DOM
ノードを追加すると、ノードのレイアウトと再描画が行われます。「html」要素のフォント
サイズを増やすなど、大きな変更を加えた場合は、キャッシュが無効になり、ツリー全体の再レイアウトと再描画が行われます。

2
  • ありがとうございます。DOMのデータ構造は木であり、描画時も木構造が生かされていてメモ化できるので、WebKit や Gecko ではこれを利用しているということですね。ただこの説明には少し疑問があって、要素の位置が変更されると子・兄弟ノード以外のノードの位置にも影響しそうな気がしました [要出典]。位置の情報は内部的には相対的なものとして覚えているんですかね……? 単純に木の親子関係だけでキャッシュの有効・無効を判定できるものなのでしょうか。
    – nekketsuuu
    2019年1月23日 6:49
  • 1
    親ノードが子ノードの変更をチェックしてフラグを立てて再描画を制御していると レイアウトの説明があるので、私の想像では部分な再描画が多くなるとキャッシュを捨て、最初から描画するのではないかとおもいます。 html5rocks.com/ja/tutorials/internals/howbrowserswork/#Layout
    – yyz
    2019年1月23日 7:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。