仕様書

文書の意味とレンダリング

[60] 文書の意味は、スクリプトその他の方法でいつ変化するとも限りません。利用者エージェントは、文書の意味が変化したら、文書の表現 (presentation) を更新しなければなりません >>59。

[67] Webブラウザーの既読URLリストの変化も、随時レンダリングに反映されます。

レンダリングの更新

[8] イベントループと今についてのレンダリングの更新 (update the rendering) は、イベントループの各周回の後半で行われる処理の1つです。仕様書で「レンダリングの更新」と呼ばれている一連の手順は、閲覧文脈に関するイベントループで実行されますが、ワーカーに関するイベントループでは実行されません。 >>82

[108] ただし専用ワーカーのイベントループでは、 requestAnimationFrame に関する処理が実行されます >>82。

[11] タスクやマイクロタスクの後に実行されます。

[205] レンダリングの更新は一時停止でも行われます。

[25] こうした処理を次にいつ実行するかは、アイドル期間の締切の決定に影響を及ぼすことがあります。

[123] なおレンダリングの更新全体の時間長の計測と報告も行われます。イベントループ

対象の決定

[12] レンダリングの更新の対象となる文書のリスト文書群は、当該イベントループに関連付けられた文書すべてから、次に挙げる条件に該当するものを除去したものです。 >>82

[100] 文書群における文書の順序は、

[101] 基本的に任意ですが、
[102] B の閲覧文脈の包含子文書が A なとき、 A より B が後でなければならず、
[103] A の閲覧文脈の包含子文書と B の閲覧文脈の包含子文書が同じ C なとき、A と B の順序は A の閲覧文脈の包含子と B の閲覧文脈の包含子の影を含む木順でなければならない

... とされています >>82。

[104] つまりフレームの入れ子関係で木を作った時、行きがけ順で探索しなければなりません。異なる木に属するフレーム同士の順序は自由です。

[124] イベントループで毎回レンダリングの更新を行う必要はなく、いつ更新するかの正確なタイミングは実装に任されています。レンダリングの更新をスキップする条件は、 3つに大別されています。

[105] レンダリング機会を持たない閲覧文脈については、対応する文書をすべて文書群から除外します。閲覧文脈がレンダリング機会 (rendering opportunity) を持つとは、利用者エージェントが閲覧文脈の内容を利用者に提示できる状態にあることをいいます。提示できるかどうかはハードウェアの refresh rate の制約や、性能上の理由による利用者エージェント基準の throttle によって定めることとし、 viewport 外にあるとしても提示可能とみなします。レンダリング機会の判断は利用者エージェントに委ねられており、例えば特定の refresh rate の維持を目的にレンダリング機会を間引いたり、可視状態にない閲覧文脈のレンダリング機会を著しく削減したりできます。 >>82

[50] 以前の仕様書にはより具体的な例として、第三者内容 (広告やSNSボタンの類など) が非表示だったり資源の制約が厳しかったりする場合にはその更新頻度を低下させることができる >>10 とありました。

[49] レンダリングの更新が可視的な影響を持たないと利用者エージェントが判断する、アニメーションフレームコールバックの写像が空でない閲覧文脈については、不要レンダリング (unnecessary rendering) であるとして、対応する文書をすべて文書群から除外します。 >>82

[106] 不要レンダリングにより除外された文書については、 mark paint timing を実行しなければなりません。 >>82

[107] その他利用者エージェントがレンダリングの更新を飛ばすのが望ましいと判断する閲覧文脈については、対応する文書をすべて文書群から除外します。例えばタイマーコールバックが連続して実行される間のレンダリングの更新を抑制したりできます。 >>82

更新処理

[13] 文書群と今について、次のようにします。 >>82

[118] 文書群中の各文書について、順に、
1. [119] 文書の閲覧文脈の最上位閲覧文脈が真の場合、
  1. [120] 文書について、 flush autofocus candidates を実行します。
[14] 文書群中の各文書について、順に、
1. [83] 文書が完全に活性な場合、
  1. [84] 文書と今について、サイズ変更手順を実行します。
[15] 文書群中の各文書について、順に、
1. [85] 文書が完全に活性な場合、
  1. [86] 文書と今について、スクロール手順を実行します。
[16] 文書群中の各文書について、順に、
1. [87] 文書が完全に活性な場合、
  1. [88] 文書と今について、媒体クエリーを評価して報告します。
[17] 文書群中の各文書について、順に、
1. [89] 文書が完全に活性な場合、
  1. [90] 文書と今について、 update animations and send eventsします。
[18] 文書群中の各文書について、順に、
1. [91] 文書が完全に活性な場合、
  1. [92] 文書と今について、全画面手順を実行します。
[19] 文書群中の各文書について、順に、
1. [93] 文書が完全に活性な場合、
  1. [94] 文書と今について、アニメーションフレームコールバックを実行します。
[54] 文書群中の各文書について、順に、
1. [95] 文書が完全に活性な場合、
  1. [96] 文書と今について、 run the update intersection observations steps します。
[78] 文書群中の各文書について、順に、
1. [97] 文書について、 mark paint timing を実行します。
[21] 文書群中の各文書について、順に、
1. [98] 文書が完全に活性な場合、
  1. [99] 文書と今について、レンダリングや利用者インターフェイスを更新します。
[125] 文書群を返します。

[26] 文書が完全に活性かどうかの判断は、それぞれの時点で行われます。前の方の手順で完全に活性の基準を満たさなくなることがあると、後の方の手順は実行されないこともあります。

[66] 今はイベントループがレンダリングの更新の前に取得した現在高精度時刻です。

[126] 文書群は、この後レンダリングの更新にかかった時間の報告に用いられます。イベントループ

専用ワーカーの処理

[109] 専用ワーカーのレンダリングの更新相当の処理は、次のようなものです HTML Standard。

[111] イベントループの DedicatedWorkerGlobalScope の対応中が真の場合で、利用者エージェントが今回レンダリングを更新するのが好ましいと判断する場合、
1. [110] 今を、現在高分解能時刻に設定します。
2. [112] イベントループの DedicatedWorkerGlobalScope と今について、アニメーションフレームコールバックを実行します。
3. [114] イベントループの DedicatedWorkerGlobalScope について、レンダリングを更新します。

OffscreenCanvas

レンダリングや利用者インターフェイスの更新

[24] レンダリングの更新の最後 (>>21) や一時停止 >>23 では、「レンダリングや利用者インターフェイスの更新 (update the rendering or user interface) 」を行います。

[52] 具体的に何を行うかは明確に定義されているわけではありませんが、次のものが含まれています。

[53] canvas における利用者へ通知 (タスク内で同期的に行なって良いしこのタイミングで行なっても良いし、行わなくても良い)
- [204] http://www.whatwg.org/specs/web-apps/current-work/#inform
[113] 外部参照を含むスタイルシートにスクリプトがアクセスできるようになるのは、最初のレンダリング更新のタイミング以降です。
- http://www.whatwg.org/specs/web-apps/current-work/#style-sheet-ready

[32] event loop step 1 時点での状態が参照されているもの ( event loop step 1 ) は、次の event loop step 1 を過ぎた時点でレンダリングを更新する必要が生じます。

閲覧文脈のレンダリング

[44] 閲覧文脈の存在と、それがレンダリングされて利用者から観察可能かどうかは、必ずしも等しくありません。

[45] 最も明確な例は、現在選択されていないタブです。

[46] Webブラウザーによっては、タブの表示位置の移動の際、一時的に viewport が消滅することがあります。

[47] Webブラウザーやウィンドウマネージャーの実装によっては、最小化されていたり画面の表示領域外にあったり、隠れていたりする窓やタブであっても、その現在の状態を表示できる機能があるかもしれません。例えば Ctrl] + Tab で窓の切り替えメニューが表示され、最新の窓の状態が表示されるかもしれません。タスクバー上の窓の表示にマウスカーソルを合わせると、最新の窓の状態が表示されるかもしれません。

Page Visibility との関係

[35] location.reload は、文脈によっては閲覧文脈を repaint することになっています。

location.reload は refresh メソッドから呼び出されることもあります。

関係が不明瞭なもの

[9] イベントループの明文化以前から存在する機能は、イベントループとの相互作用が明文化されていないものがあります。

[63] fetch が画像や XML のタスクを複数生成する時に、それをインクリメンタル・レンダリングする処理モデルは定義されていません。

[36] Web で使われる画像形式は、データが到着した部分から順次レンダリングできるのが普通です。通常は上の画素から順に表示されていきますが、プログレッシブJPEG など全体を最初にレンダリングし、徐々に高解像度化して表示できる形式もあります。

[194] blink 要素や CSS の text-decoration: blink では点滅が発生します。

[195] marquee のアニメーションは HTML Standard で定義されていますが、イベントループとの関係には言及がありません。

[40] progress 要素はアニメーションでレンダリングされることがあります。

[193] レンダリングを行うタイミングはイベントループで定義されていますので、レンダリングの変化はその時に発生するのでしょうが、ハードウェアに動画の再生を任せている場合など、独自のタイミングで更新が発生するかもしれません。

[37] プラグインは、 Webブラウザー本体とは独立してレンダリングを行うかもしれません。

[64] アニメーションGIFのレンダリングとの関係は定義されていません。ただし同じURLのアニメーションGIFは、最初に読み込まれたものの再生と同期する、と HTML により規定されています。

[38] テキスト入力の現在位置を表すカーソル (キャレット) は、プラットフォームによっては点滅するかもしれません。

[197] CSS Transitions, SMIL Animations, SVG

スクロールやズームとの関係、窓やタブの切り替えによる再描画との関係

動画やアニメーションと pause との関係

閲覧文脈外の利用者インターフェイス

[41] 普通レンダリングというとき、閲覧文脈内 (画布) のことをいいます。

[42] しかし利用者エージェントによっては閲覧文脈外の利用者インターフェイスも同じようなタイミングで更新するかもしれません。例えば次のものがあります。

タイトルバー (document.title)
favicon
アドレスバー (文書の番地、service identity、EV証明書)
検索 (OpenSearch など)
状態バー (window.status)
ツールチップ
フォームの検証に関する表示
読み込み中の表示 (navigate 参照)
色 (theme-color)
履歴に関するメニューやボタン
Site Navigation Bar や Link Toolbar の類 (link)
文脈メニューや命令の一覧のメニュー
[39] マウスカーソルは、通常は OS の機能によって実現され、 Webブラウザーとは独立して動作します。アニメーションに対応しているかもしれません。
Permission やスクリプト無効等の文書や起源や閲覧文脈に依存する設定の表示
基本認証やパスワードマネージャー等認証情報に関する表示
開発者ツールの表示、コンソールなど

[43] なお、更新が必要になることはないかもしれませんが、次のような閲覧文脈外の利用者インターフェイスもあります。

文脈

イベントループからの呼び出し

CSSOM View からの呼び出し

その他

[69] suspendRedraw

歴史

[22] レンダリングに関する諸々の処理は従来イベントループにおいて (このタイミングで実行してもよいという以上には) 明確には規定されていませんでした。しかし個々の規定が詳細化され、相互作用も明確にする必要が生じてきたことから、 2014年11月に HTML Standard のイベントループの規定が各仕様の処理を呼び出す形に詳細化されました。