レンダリングの更新

レンダリングの更新 (Web)

目次

  1. 仕様書
  2. 文書の意味とレンダリング
  3. レンダリングの更新
    1. 対象の決定
    2. 更新処理
    3. 専用ワーカーの処理
  4. レンダリングや利用者インターフェイスの更新
  5. 閲覧文脈のレンダリング
  6. 関係が不明瞭なもの
  7. 閲覧文脈外の利用者インターフェイス
  8. 文脈
  9. その他
  10. 関連
  11. 歴史

仕様書#

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

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

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

レンダリングの更新#

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

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

[11] タスクマイクロタスクの後に実行されます。
[205] レンダリングの更新は一時停止でも行われます。

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

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

対象の決定#

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


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

... とされています >>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

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

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

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

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

専用ワーカーの処理#

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

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

OffscreenCanvas

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

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

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

[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.reloadrefresh メソッドから呼び出されることもあります。

関係が不明瞭なもの#

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

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

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

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

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

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

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

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

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

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

スクロールズームとの関係、 タブの切り替えによる再描画との関係
動画やアニメーションと pause との関係

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

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

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

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

文脈#

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

その他#

関連#

[70] レンダリングの開始も参照。

歴史#

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

[206] Re: [cssom-view][css3-animations] Sync events with requestAnimationFrame ( (Simon Pieters 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014Dec/0133.html

[31] IRC logs: freenode / #whatwg / 20150212 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20150212

[33] IRC logs: freenode / #whatwg / 20150702 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20150702

[34] Bug 28876 – Doing too much stuff around animation frame tick may cause rendering updates to be postponed ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28876

[48] Allow not rendering nested browsing contexts · whatwg/html@ee77b87 ( 版) https://github.com/whatwg/html/commit/ee77b8710cea05aa1c56b32b9d7d790c39a62aef

[51] Add intersection observer to the event loop's rendering · whatwg/html@a5f708c ( 版) https://github.com/whatwg/html/commit/a5f708cf5cbb909345a0da695fb86b2a6cd9d3a0

[55] Fix #818: add another example of when to skip updating the rendering · whatwg/html@a999104 ( 版) https://github.com/whatwg/html/commit/a9991042e27cb9e90538b287352577db3b427780

[57] New 'update the rendering' process may have negative consequences with respect to callbacks · Issue #818 · whatwg/html ( 版) https://github.com/whatwg/html/issues/818

[58] 28001 – Formalize rendering tasks ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28001

[61] W3M FAQ ( ()) http://homepage2.nifty.com/aito/w3m/FAQ.html

w3mはHTML文書を2パスで整形するので,文書全体を読みこまないと 表示ができません.Netscapeなどは文書を読みながら表示するので, 表示が速いように思えるのでしょう.

[62] Remove the concept of CSS Bindings (annevk著, ) https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94

[65] Reject exitFullscreen() in inactive documents (foolip著, ) https://github.com/whatwg/fullscreen/commit/59574a4dc4cebf5dc13cb9823ef4f91fbb496be3

[68] Browser Rendering Pipeline - Google ドキュメント () https://docs.google.com/document/d/1Mw6qNw8UAEfW96CXaXRVYPPZjqQS3YdK7v57wFttAhs/edit?pref=2&pli=1#

[71] Fullscreen/unfullscreen ASAP; fire events at animation frame timing (foolip著, ) https://github.com/whatwg/fullscreen/commit/4208e5a98c78d716f664a85749fba6d4eb2822f2

[72] Link to "run the fullscreen steps" in Fullscreen (foolip著, ) https://github.com/whatwg/html/commit/7c2b5dcbfd27d2727eaeeb504faa654d3d8cc8f8

[73] Add img.decode() API for "predecoding" images (domenic著, ) https://github.com/whatwg/html/commit/af6b0e9b5c2942ad32ccb600031fb4b953011982

[74] Properly reference "update animations and send events" (domenic著, ) https://github.com/whatwg/html/commit/99c9e027417d453ed2bd35e08df16d47524fddd2

[75] Use the current high resolution time concept (annevk著, ) https://github.com/whatwg/html/commit/9dbad6a2c9f24c9a7998997d2b1b337c2acd5a52

[76] Use the current high resolution time concept by annevk · Pull Request #3707 · whatwg/html () https://github.com/whatwg/html/pull/3707

[77] Integrate with the Paint Timing spec (tdresser著, ) https://github.com/whatwg/html/commit/92b90bd6137faac0d15aca1ec234afdc80b9547b

[79] It is totally unclear what 'duration' tries to measure · Issue #6 · WICG/event-timing () https://github.com/WICG/event-timing/issues/6

[80] Eliminate paint timing monkey patching by tdresser · Pull Request #3923 · whatwg/html () https://github.com/whatwg/html/pull/3923

[81] Integrate with Paint Timing · Issue #1609 · w3c/html () https://github.com/w3c/html/issues/1609

[56] Add requestAnimationFrame() in workers (fserb著, ) https://github.com/whatwg/html/commit/3d9b41d1086131f21cd87a1957344a6fdb7e1748

[115] OffscreenCanvasAnimation/OffscreenCanvasAnimation.md at 2e0546417d4f45d194270a67a1cdf303f2e0ef88 · junov/OffscreenCanvasAnimation () https://github.com/junov/OffscreenCanvasAnimation/blob/2e0546417d4f45d194270a67a1cdf303f2e0ef88/OffscreenCanvasAnimation.md

[116] Update autofocus processing algorithm (tkent-google著, ) https://github.com/whatwg/html/commit/2d783dbb7c6c0343b4850f3be935e893a1de5582

[117] Autofocus spec should probably allow browsers to delay running the focusing steps, maybe? · Issue #3551 · whatwg/html () https://github.com/whatwg/html/issues/3551

[121] Change the timing of "flush autofocus candidates" (tkent-google著, ) https://github.com/whatwg/html/commit/74b61242c716876bad8e24fe358796d31b9ecae1

[122] Integrate with the Long Tasks spec (npm1, , ) https://github.com/whatwg/html/commit/425a67ba81288305fce86736a0772f84c3f30eed

[127] Add the Paint Timing spec to References section by sideshowbarker · Pull Request #3949 · whatwg/html () https://github.com/whatwg/html/pull/3949

[128] Give browsing context an explicit container (annevk, , ) https://github.com/whatwg/html/commit/7b4964ad0a953b05738afc66600fa47a4dc8045d