1. 序論
~pageの読込は、~~時間軸における単独の時点ではない — それは、ある 1 つの計量で全部的に捕捉できる体験ではない。 読込~体験の間には、［ 利用者が “速い”, “遅い” どちらに知覚するか ］に影響し得るような，複数の時点がある。 ◎ Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as "fast" or "slow".
`最初の塗り$は，これらの主要な時点のうち最初のものであり、`最初の有内容な塗り$が，それに後続する。 これらの計量は、~naviの直後に，~browserが画素を~screenに描画する時点を刻む。 これは、 “起きているのか？” の問いに答えるので，利用者にとって重要になる。 ◎ First Paint (FP) is the first of these key moments, followed by First Contentful Paint (FCP). These metrics mark the points, immediately after navigation, when the browser renders pixels to the screen. This is important to the user because it answers the question: is it happening?
2 つの計量の第一の相違は： `最初の塗り$は、~browserが［ 何であれ，~navi前に~screen上にあったものとは視覚的に異なるもの ］を描画する時点を刻む。 一方で，`最初の有内容な塗り$は、~browserが［ ~DOMからの内容を成す最初の~bit ］を描画する時点を刻む — それは、［ ~text, 画像, ~SVG, `canvas^e 要素 ］のいずれにもなり得る。 ◎ The primary difference between the two metrics is FP marks the point when the browser renders anything that is visually different from what was on the screen prior to navigation. By contrast, FCP is the point when the browser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a canvas element.
1.1. 用法~例
var %observer = new PerformanceObserver(function(%list) {
var %perfEntries = %list.getEntries();
for (var %i = 0; %i < %perfEntries.length; %i++) {
/*
解析と監視~用に，~entryたちを処理して報告する…
◎
Process entries report back for analytics and monitoring ...
*/
}
});
/*
長い~taskの通知~用に観測器を登録する
◎
register observer for long task notifications
*/
%observer.observe({entryTypes: ["paint"]});
2. 各種用語
- `塗り@ （ `Paint^en ／ `paint^en ） ◎ Paint:
- ~browserが描画-木を~screen上の画素に変換したときに遂行した “塗り” （あるいは “描画-” ）。 これは、公式には、`~event-loop処理~model$における “`描画を更新する$とき” として定義される。 ◎ the browser has performed a "paint" (or "render") when it has converted the render tree to pixels on the screen. This is formally defined as the when "update the rendering" happens in event loop processing.
- 注記： 描画~pipelineは とても複雑なので、そのときを指す時刻印は，~browserが この~pipelineにおいて~~記録可能な最新の時刻印になるべきである（ `best effort^en で）。 この~API用には、概して，表示-用の~frameが~OSに提出される時点が推奨される。 ◎ NOTE: The rendering pipeline is very complex, and the timestamp should be the latest timestamp the browser is able to note in this pipeline (best effort). Typically the time at which the frame is submitted to the OS for display is recommended for this API.
- `最初の塗り@ （ `First Paint^en ／ `first paint^en ／ `first-paint^en ／ FP ） ◎ First Paint
- これに対応する~entryは、~browserが~navi後に最初に何かを描画した時点を報告する `DOMHighResTimeStamp$I 値を包含する。 これには、既定の背景~塗りは含まれないが，［ 既定でない背景 ／ ~iframeを封入している~box ］の塗りは含まれる。 これは、開発者が~pageの読込について~careする最初の主要な時点 — ~browserが~pageの描画を開始したとき — を表す。 ◎ entry contains a DOMHighResTimeStamp reporting the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint and the enclosing box of an iframe. This is the first key moment developers care about in page load – when the browser has started to render the page.
- `最初の有内容な塗り@ （ `First Contentful Paint^en ／ `first contentful paint^en ／ `first-contentful-paint^en ／ FCP ） ◎ First Contentful Paint
- これに対応する~entryは、~browserが最初に［ ~text ／ 画像（背景~画像も含む） ／ 白紙でない `canvas^e ／ ~SVG ］を描画した時点を報告する `DOMHighResTimeStamp$I 値を包含する。 これには、~iframeの内容は含まれないが，~textは処理待ち~webfontがあっても含まれる。 これは、利用者が最初に~page内容の消費を開始できる時刻になる。 ◎ entry contains a DOMHighResTimeStamp reporting the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content.
3. 塗り計時
塗り計時は、新たな~interfaceとして `PerformancePaintTiming^I を孕む： ◎ Paint timing involves the following new interface ◎ 3.1. PerformancePaintTiming interface
interface `PerformancePaintTiming@I : `PerformanceEntry$I {};
`PerformancePaintTiming$I は、 `PerformanceEntry$I ~interfaceの以下に挙げる属性を拡張する： ◎ PerformancePaintTiming extends the following attributes of PerformanceEntry interface:
- `name$m
- 取得子は、生じた塗りの種別を表す名前を，次に与える文字列として返さ~MUST ⇒＃ `最初の塗り$用には `first-paint^l ／ `最初の有内容な塗り$用には `first-contentful-paint^l ◎ The name attribute must return DOMString for minimal frame attribution. Possible values of name are: • first-paint: for First Paint • first-contentful-paint: for First Contentful Paint
- `entryType$m
- 取得子は、 `paint^l を返さ~MUST。 ◎ The entryType attribute must return "paint".
- `startTime$m
- 取得子は、塗りが生じた時点を表す `DOMHighResTimeStamp$I を返さ~MUST。 ◎ The startTime attribute MUST return a DOMHighResTimeStamp of when the paint occured.
- `duration$m
- 取得子は、 0 を返さ~MUST。 ◎ The duration attribute MUST return 0.
4. 処理~model
4.1. 他の仕様に対する改変
4.1.1. ~HTMLの`~event-loop処理~model$
その`描画を更新する$ときの ⇒ ( 時刻印 %now ) を与える下で，全部的に作動中の ~EACH( %文書 ) に対し［［ %文書, および %文書 が属する閲覧文脈 ］の描画や~UIを，現在の状態を反映するように更新する ］段では、次も遂行する ⇒ `塗り計時を刻む$( %文書, %now ) ◎ During step 7.12 in "update the rendering": • For each fully active Document in docs, update the rendering or user interface of that Document and its browsing context to reflect the current state, and invoke §4.2.1 Mark Paint Timing while doing so.
4.2. 塗り計時の報告-法
【 この節に与える各 手続きがとる引数 %文書 は、この訳による補完。 】
`塗り計時を刻む@ ときは、所与の ( `文書$ %文書, 時刻印 %塗り時刻印 ) に対し，次の手続きを遂行する： ◎ 4.2.1. Mark Paint Timing • Perform the following steps:
-
~IF［ この手続きを呼出した描画を更新する段は、`最初の塗り$である ］ ⇒ `塗り計時を報告する$( %文書, `first-paint^l, %塗り時刻印 ) ◎ If this instance of update the rendering is the first paint, then record the timestamp as paint-timestamp and invoke §4.2.2 Report Paint Timing algorithm with two arguments: string "first-paint" and paint-timestamp.
注記： `最初の塗り$には、既定の背景~塗りは含まれないが，既定でない背景~塗りは含まれる。 ◎ NOTE: First paint excludes the default background paint, but includes non-default background paint.
-
~IF［ この手続きを呼出した描画を更新する段は、`最初の有内容な塗り$である ］ ⇒ `塗り計時を報告する$( %文書, `first-contentful-paint^l, %塗り時刻印 ) ◎ If this instance of update the rendering is the first contentful paint, then record the timestamp as paint-timestamp and invoke §4.2.2 Report Paint Timing algorithm with two arguments: string "first-contentful-paint" and paint-timestamp.
注記： ［ ~text ／ 画像（背景~画像も含む） ／ 白紙でない `canvas^e ／ ~SVG ］は、この塗りに含まれ~MUST。 ◎ NOTE: This paint must include text, image (including background images), non-white canvas or SVG.
-
~ELSE ⇒ 何もしない ◎ Otherwise, do nothing and return.
注記： 親~frameと子~iframeは、互いの塗り~eventに関知するべきでない。 したがって，ある~frameが包含している~iframeは、~frameに対し（~iframeを封入している~boxがあることに因り）`最初の塗り$は生じさせ得るが，`最初の有内容な塗り$を生じさせることはない。 ◎ NOTE: A parent frame should not be aware of the paint events from its child iframes, and vice versa. This means that a frame that contains just iframes will have first paint (due to the enclosing boxes of the iframes) but no first contentful paint.
`塗り計時を報告する@ ときは、所与の ( %文書, %塗り種別, %塗り時刻印 ) に対し，次の手続きを遂行する： ◎ 4.2.2. Report Paint Timing • Given two arguments paint-type and paint-timestamp, perform the following steps:
- %新たな~entry ~LET 次のように設定された新たな `PerformancePaintTiming$I ~obj ⇒＃ `name$m 属性 ~SET %塗り種別 `entryType$m 属性 ~SET `paint^l `startTime$m 属性 ~SET %塗り時刻印 `duration$m 属性 ~SET 0 ◎ Create a new PerformancePaintTiming object newEntry and set its attributes as follows: • Set newEntry’s name attribute to paint-type • Set newEntry’s entryType attribute to paint • Set newEntry’s startTime attribute to paint-timestamp • Set newEntry’s duration attribute to 0.
- `処理能~entryを~queueする$( %新たな~entry ) 【これは、暗黙的に “文脈~obj” — ここでは %文書 — も引数にとる。】 ◎ Add the PerformanceEntry newEntry object.
5. 謝辞
技術的な~~協力, 示唆を寄せられ、この仕様を改善へ導いた すべての協力者 に，特別な謝意を。 ◎ Special thanks to all the contributors for their technical input and suggestions that led to improvements to this specification.