1. 序論
◎非規範的利用者~用に［ ~HTML, ~CSS, 画像 ］資源を~screen上の画素~群に翻訳することは、 ~web~browserの目的のかなりを占める。 ~web~pageの処理能を測定することは、 これらの［ ~textや画像などの内容を~screenへ描画する~task ］を遂行するためにかかった時間を測定することを孕むことが多い。 この計時を［ ~pageの処理能／ 読込ngの利用者~体験 ］について言明を為すために利用する仕方には，様々なものがあるが、 どの仕方でも，基礎的には［ 時間を測定するための共通な手段 ］で始まる。 ◎ Much of the purpose of a web browser is to translate HTML, CSS and image resources into pixels on a screen for users. Measuring the performance of a web page often involves measuring the time it takes to perform these tasks - to render content, whether text or image, to the screen. There are many different ways to use this timing to make statemements about the performance of a page, or about the user experience of loading, but fundamentally all of those ways begin with a common means of measuring time.
これは、 塗り計時を測定する方法を一般~目的な仕組みとして指定する土台になる文書である。 その土台は、 `最初の塗りと最初の有内容な塗りの計量＠#first-paint-and-first-contentful-paint$を定義するために利用される。 他の文書も、 塗りの測定を成す他の特定の~instanceを指定し得る。 ◎ This is a foundational document which specifies how to measure paint timing as a general-purpose mechanism. That foundation is then used to define the First Paint and First Contentful Paint metrics. Other specific instances of paint measurement may be specified in other documents.
この仕様が特定的に受持つものは： ◎ Specifically, this specification covers:
- 画像が復号され，塗るために準備済みになった時刻を測定する。 ◎ Measuring the time when images are decoded and ready for painting
- 要素が塗られた時刻を測定する。 ◎ Measuring the time when elements are painted
- 塗られた要素の~sizeを測定する。 ◎ Measuring the size of the painted elements
- 塗られた要素が可視な内容を包含するか否かを決定する。 ◎ Determining whether a painted element contains any visible content.
1.1. 最初の塗りと最初の有内容な塗り
~pageの読込nは、 ~~時間軸における単独の時点ではない — それは、 ある 1 つの計量で全部的に捕捉できる体験ではない。 読込n体験の間には、［ 利用者が “速い”, “遅い” どちらに知覚するか ］に影響し得る複数の時点がある。 ◎ 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".
`最初の塗り$は，これらの主要な時点のうち最初のものであり、 `最初の有内容な塗り$が，それに後続する。 これらの計量は、 ~browserが所与の文書を描画する時点を刻む。 これは、 “起きているのか？” の問いに答えるので，利用者にとって重要になる。 ◎ First paint (FP) is the first of these key moments, followed by first contentful paint (FCP). These metrics mark the points in time when the browser renders a given document. This is important to the user because it answers the question: is it happening?
2 つの計量の首な相違は： `最初の塗り$は、［ ~browserが所与の文書~用に初めて何かを描画する時点 ］を刻む。 対照的に，`最初の有内容な塗り$は、［ ~browserが~DOMからの画像や~text内容を成す最初の~bitを描画する時点 ］を刻む。 ◎ The primary difference between the two metrics is FP marks the first time the browser renders anything for a given document. By contrast, FCP marks the time when the browser renders the first bit of image or text content from the DOM.
1.2. 用法~例
const %observer = new PerformanceObserver(function(%list) {
var %perfEntries = %list.getEntries();
for (const %perfEntry of %perfEntries) {
/*
解析と監視~用に，~entryたちを処理して報告する…
◎
Process entries report back for analytics and monitoring ...
*/
}
});
/*
塗り計時の通知~用に観測器を登録する
◎
register observer for paint timing notifications
*/
%observer.observe({entryTypes: ["paint"]});
2. 各種用語
- `塗り@ （ `paint^en ） ◎ Paint:
- ~UAが描画-~treeを~screen上の画素に変換したときに遂行した “塗り” （あるいは “描画-” ）。 正式には、 `描画を更新する手続き$ `HTML$r を遂行したとき，~UAは文書を “描画した” と見なされる。 ◎ the user agent has performed a "paint" (or "render") when it has converted the render tree to pixels on the screen. Formally, we consider the user agent to have "rendered" a document when it has performed the update the rendering steps of the event loop.
- 注記： 描画~pipelineは とても複階的なので、 そのときを指す時刻印は，~UAが この~pipelineにおいて~~記録可能な最新の時刻印になるべきである（最善な労の下で）。 この~API用には、 概して，表示-用の~frameが~OSに提出される時点が推奨される。 ◎ NOTE: The rendering pipeline is very complex, and the timestamp should be the latest timestamp the user agent 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.
- `塗り可能な疑似要素@ （ `paintable pseudo-element^en ） ◎ A generated content pseudo-element is a paintable pseudo-element＼
-
`生成d内容~疑似要素＠~CSSPSEUDO#generated-content$であって，次に挙げるすべてを満たすもの： ◎ when all of the following apply:
- `visibility$p の`使用~値$ ~EQ `visible^v ◎ The pseudo-element’s used visibility is visible.
- `opacity$p の`使用~値$ ~GT 0 ◎ The pseudo-element’s used opacity is greater than zero.
- 空でない`~box$を生成する ◎ The pseudo-element generates a non-empty box.
- `有内容な画像@ （ `contentful image^en ） ◎ A CSS image img is a contentful image＼
-
`image$t による~CSS画像であって，次に挙げるすべてを満たすもの： ◎ when all of the following apply:
- `image$t は `url$t である ◎ img is url valued.
- `可用な画像$を表現している ◎ img is available.
- `空でない~text@
- 1 個~以上の`空白$でない文字を包含する文字列【！DOMString】。 ◎ A DOMString is non-empty if it contains at least one character excluding document white space characters.
- `有内容@ （ `contentful^en ）な要素 ◎ An element target is contentful＼
-
~OR↓ を満たす`要素$： ◎ when one or more of the following apply:
-
次を満たす`~text~node$が子に在る ⇒ ［ `空でない~text$を表現している ］~AND［ `opacity$p の`使用~値$ ~GT 0 † ］ ◎ target has a text node child, representing non-empty text, and the node’s used opacity is greater than zero.
注記：† これは、 ある `~typographicな疑似要素＠~CSSPSEUDO#typographic-pseudos$が， この~text~nodeの不透明度を上書きする事例を受持つ。 ◎ NOTE: this covers the case where a typographical pseudo-element would override the opacity of the text node.
- `可用な画像$【！`画像$】を表現している`置換d要素$である ◎ target is a replaced element representing an available image.
- ［ `background-image$p は`有内容な画像$である ］~AND［ `background-size$p の`使用~値$の横幅, 縦幅とも 0 でない ］ ◎ target has a background-image which is a contentful image, and its used background-size has non-zero width and height values.
- 次を満たす `canvas$e 要素である ⇒ `~canvas文脈~mode$ ~NEQ `none^v ◎ target is a canvas with its context mode set to any value other than none.
- 次を満たす `video$e 要素である ⇒ その［ `~poster~frame$／最初の動画~frame ］を`表現-$していて，当の~frameは可用である ◎ target is a video element that represents its poster frame or the first video frame and the frame is available.
- 次を満たす `svg$e 要素である ⇒ `描画される子孫がある＠~SVGrender#Rendered-vs-NonRendered$ ◎ target is an svg element with rendered descendants.
- 次を満たす `input$e 要素である ⇒ `value$a 属性を有していて, その値は`空でない~text$である ◎ target is an input element with a non-empty value attribute.
- ［ 次のいずれかを表現する`塗り可能な疑似要素$ ］の`出自の要素$である ⇒＃ `有内容な画像$／ `空でない~text$ ◎ target is an originating element for a paintable pseudo-element that represents a contentful image or non-empty text.
-
- 【 語義的には，［ 子孫に`有内容$な要素が在る要素も`有内容$である ］と見なしたくなる所だが、 上の定義はそうなっていない。 とはいえ，そのように定義を改めても結果は同じになる（現時点では, および この仕様に限るなら）。 】
- `計時に適格@ （ `timing-eligible^en ） な要素 ◎ An element is timing-eligible＼
-
~OR↓ を満たす`要素$： ◎ if it is one of the following:
- `img$e 要素である ◎ an img element.
- 次を満たす `image$e 要素である ⇒ `svg$e 要素の内側にある ◎ an image element inside an svg element.
- 次を満たす `video$e 要素である ⇒ その`~poster~frame$ ~NEQ ε ◎ a video element with a poster frame.
- その `background-image$p ~propは`有内容な画像$を与えている ◎ an element with a contentful background-image.
- ~text~nodeである 【`子孫~text内容$は`空でない~text$である？】 ◎ a text node.
- `塗り可能な限界~矩形@ （ `paintable bounding rect^en ） ◎ ＼
-
`要素$ %要素 の`塗り可能な限界~矩形$を算出するときは、 次の手続きを走らす： ◎ To compute the paintable bounding rect of element target, run the following steps:
- %限界~矩形 ~LET 次を走らせた結果 ⇒ %要素 上の `getBoundingClientRect$m ~method手続き() ◎ Let boundingRect be the result of running the getBoundingClientRect() on target.
- %限界~矩形 を`文書$の`~scroll用~区画$で切取る ◎ Clip boundingRect with the document's scrolling area.
- ~RET %限界~矩形 ◎ Return boundingRect.
注記： 要素が［ `overflow$p が［ `scroll^v ／ `hidden^v ］にされた~box ］に包含されている場合、 `塗り可能な限界~矩形$は切取られない — 両~事例とも，`要素$を~scrollすることで可視になり得るので。 ◎ NOTE: elements contained by boxes with overflow: scroll or overflow: hidden don’t have their paintable bounding rect clipped, as in both cases the element can become visible by scrolling.
- `塗り可能@ （ `paintable^en ）な要素 ◎ An element el is paintable＼
-
次に挙げるすべてを満たす`要素$ ◎ when all of the following apply:
- `具現化されて$いる ◎ el is being rendered.
- `visibility$p の`使用~値$ ~EQ `visible^v ◎ el’s used visibility is visible.
-
自身, および そのどの先祖も，次を満たす ⇒ `opacity$p の`使用~値$ ~GT 0 ◎ el and all of its ancestors' used opacity is greater than zero.
注記： 例えば，~textがその背景と同じ色である事例など、 塗り可能な`要素$が利用者から可視にならない事例もある。 それらの要素は、 `最初の有内容な塗り$を算出する目的においては，依然として塗り可能と見なされる。 ◎ NOTE: there could be cases where a paintable element would not be visible to the user, for example in the case of text that has the same color as its background. Those elements would still considered as paintable for the purpose of computing first contentful paint.
-
その`塗り可能な限界~矩形$は、 `文書$の`~scroll用~区画$と交差する ◎ el’s paintable bounding rect intersects with the scrolling area of the document.
注記： これは、 次に挙げるような，内容【区画】が空な矩形に解決される事例を受持つ ⇒＃ 要素は~size 0 に拡縮される／ `display$p は `none^v または `contents^v ◎ NOTE: This covers the cases where the element is scaled to zero size, has display: none, or display: contents where the contents resolve to an empty rect.
注記： 一般~規則として，`要素$は、 表示域の中にあるか［ ~scrollする／~zoomする ］ことでそうなり得るならば塗り可能である。 ◎ NOTE: As a general rule, an element is paintable if it is within the viewport, or can potentially be in the viewport as a result of scrolling or zooming.
- `最初の塗り@ （ `first paint^en ／ FP ） ◎ First paint
- これに対応する~entryは、 `DOMHighResTimeStamp$I 値を包含する — それは、 ~UAが~navi後に最初に何かを描画した時点を報告する。 これには、 既定の背景~塗りは含まれないが，［ 既定でない背景 ／ ~iframeを封入している~box ］の塗りは含まれる。 これは、 開発者が~pageの読込nについて~careする最初の主要な時点 — ~UAが~pageの描画を開始したとき — を表す。 ◎ entry contains a DOMHighResTimeStamp reporting the time when the user agent 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 user agent has started to render the page.
- `塗り計時に適格@ （ `paint-timing eligible^en ） ◎ ↓
-
所与の`閲覧~文脈$が`塗り計時に適格$であるとは、 ~OR↓ を満たすことをいう： ◎ A browsing context ctx is paint-timing eligible when one of the following apply:
- `~top-level閲覧~文脈$である ◎ ctx is a top-level browsing context.
-
［ `入子な閲覧~文脈$である ］~AND［ ~UAは、［ この閲覧~文脈が塗り計時を報告する ］よう環境設定されている ］ ◎ ctx is a nested browsing context, and the user agent has configured ctx to report paint timing.
注記： これは、［ ~main~frameの他に，塗り計時を可能化する~frameは、 一部に限る ］ことを~UAに許容する。 例えば，~UAは、 非同一-生成元に属する~iframe用には， 塗り計時を不能化するよう裁定してもヨイ — 一部の局面においては、 それらの塗り計時は［ ~main~frameについての情報を露呈する ］かもしれないので。 ◎ NOTE: this allows user agents to enable paint-timing only for some of the frames, in addition to the main frame, if they so choose. For example, a user agent may decide to disable paint-timing for cross-origin iframes, as in some scenarios their paint-timing might reveal information about the main frame.
`PaintTimingMixin^I ~interface~mixin
[`Exposed$=Window]
interface mixin `PaintTimingMixin@I {
readonly attribute `DOMHighResTimeStamp$I `paintTime@m;
readonly attribute `DOMHighResTimeStamp$I? `presentationTime@m;
};
`PaintTimingMixin$I ~interface~mixinを`内包-$【する~interfaceを`実装-$】している各~objには、 `塗り計時~報@ptM が結付けられる — それは、［ ~NULL ／ある`塗り計時~報$ ］である。 ◎ Objects including the PaintTimingMixin interface mixin have an associated paint timing info (null or a paint timing info).
`塗り計時~報@ は、 次に挙げる`~item$sctを伴う`構造体$である： ◎ paint timing info is a struct. It has the following items:
- `描画~更新~終了~時刻@ptI ⇒ ある `DOMHighResTimeStamp$I ◎ rendering update end time • A DOMHighResTimeStamp
- `実装定義な呈示~時刻@ptI ⇒ ~NULL ／ ある `DOMHighResTimeStamp$I ◎ implementation-defined presentation time • Null or a DOMHighResTimeStamp
【† `塗り計時~報$ptM ~EQ ~NULL の場合にどうなるか指定されていないが、 この仕様が定義する~interface（ `PerformancePaintTiming$I ）においては， ~NULL をとり得ない。 】
`既定の塗り時刻印@ は、 所与の ( `塗り計時~報$ %塗り計時~報 ) に対し：
- %時刻印 ~LET %塗り計時~報 の`実装定義な呈示~時刻$ptI
- ~IF［ %時刻印 ~NEQ ~NULL ］ ⇒ ~RET %時刻印
- ~RET %塗り計時~報 の`描画~更新~終了~時刻$ptI
3. `PerformancePaintTiming^I ~interface
[`Exposed$=Window]
interface `PerformancePaintTiming@I : `PerformanceEntry$I {};
`PerformancePaintTiming$I includes `PaintTimingMixin$I;
`PerformancePaintTiming$I は、 `PerformanceEntry$I ~interfaceの以下に挙げる属性を拡張する： ◎ PerformancePaintTiming extends the following attributes of PerformanceEntry interface:
- `name$m 取得子~手続きは ⇒ ~RET 生じた塗りの種別に応じて，次に与える文字列 ⇒＃ `最初の塗り$用には `first-paint^l ／ `最初の有内容な塗り$用には `first-contentful-paint^l ◎ The name attribute’s getter must return a DOMString for minimal frame attribution. Possible values of name are: • "first-paint": for first paint • "first-contentful-paint": for first contentful paint
- `entryType$m 取得子~手続きは ⇒ ~RET `paint^l ◎ The entryType attribute’s getter must return "paint".
- `startTime$m 取得子~手続きは ⇒ ~RET 塗りが生じた時点を表す `DOMHighResTimeStamp$I 値 ◎ The startTime attribute’s getter must return a DOMHighResTimeStamp of when the paint occured.
- `duration$m 取得子~手続きは ⇒ ~RET 0 ◎ The duration attribute’s getter must return 0.
注記： `PerformancePaintTiming$I を実装している~UAは、 `大域~obj$rMのうち［ それに`対応する閲覧~文脈$は`塗り計時に適格$であるもの ］には，その `supportedEntryTypes$m 内に `paint^l を含める必要がある。 これは、［ 特定0の`閲覧~文脈$に対し塗り計時~用の~supportを検出すること ］を，開発者に許容する。 ◎ NOTE: A user agent implementing PerformancePaintTiming would need to include "paint" in supportedEntryTypes of a global object whose browsing context is paint-timing eligible. This allows developers to detect support for paint timing for a particular browsing context.
4. 処理~model
4.1. 要素に結付けられた画像~要請
各`要素$には，それに `結付けられた画像~要請@ がある — それは、［ `画像~要請$／~NULL ］であり， 初期~時は ~NULL とする。 ◎ Each Element has an associated image request which is an image request or null, initially null.
注記： 画像~資源が［ `~scheme$urlが `data^l に等しい~URL ］から得されたものである場合，ある`画像~要請$が結付けられる — それは、 ~fetchされないが，それでも読込む必要がある。 この要請は、 `要素$に`結付けられた画像~要請$になり得る。 ◎ Note: Every image resource that is obtained from a URL whose scheme is equal to "data" has an associated image request which is not fetched but still needs to be loaded. This request can be the associated image request of an Element.
注記： 現在の文言は、 特定の~algoを指しておらず，漠然としている。 これは、 対応する処理~modelが より統一化されるに伴い，より厳格にされ得る。 ◎ Note: The current language is vague since it does not point to specific algorithms. This can be made more rigorous when the corresponding processing models have a more unified processing model.
各`要素$ %要素 には、 それに `結付けられた背景~画像~要請~群@ がある — それは、 `画像~要請$たちが成す`~list$【！配列】であり，初期~時は空とする。 ◎ Every Element has a list of associated background image requests which is initially an empty array.＼
注記： `要素$が有する`画像~要請$は複数個あり得る — 例： その `background-image$p ~propが複数個の画像を与えている場合。 一例として、 次の例では，単独の `background-image$p ~propが 4 個の `画像~要請$を生産する — 各~要請は、 以下の~algoにより記録され報告されることになる。 ◎ NOTE: An Element can have several image requests, e.g. if its background-image property has multiple values. For instance, in the following example, a single background-image property produces four image requests, each of which will be recorded and reported by the algorithms below.
<!DOCTYPE html>
<style>
div {
background-image: url(https://images.example/background1.png),
url(https://images.example/background2.png);
}
</style>
<div></div>
<div></div>
4.2. 塗り計時の記録-法
`処理待ち画像~記録@ は、 次に挙げる`~item$sctを伴う`構造体$である： ◎ A pending image record is a struct with the following items:
- `要素@piR ⇒ ある`要素$ ◎ element, an Element
- `要請@piR ⇒ ある`画像~要請$ ◎ request, an image request
- `読込n時刻@piR ⇒ ある `DOMHighResTimeStamp$I ◎ loadTime, a DOMHighResTimeStamp
各`要素$には、 それが `所有する~text~node群@ がある — それは、 `Text$I ~nodeたちが成す`有順序~集合$であり， 初期~時は空とする。 ◎ Each Element has a set of owned text nodes, which is an ordered set of Text nodes, initially empty.
各`文書$は、 次に挙げるものを有する： ◎ ↓
- `以前に報告した塗り群@ ⇒ `文字列$たちが成す`有順序~集合$ — 初期~時は空とする。 ◎ Each Document has a set of previously reported paints, which is an ordered set of strings, initially empty.
- `描画~処理待ち画像~群@ ⇒ `処理待ち画像~記録$たちが成す`~list$ — 初期~時は空とする。 ◎ Each Document has an images pending rendering, which is a list of pending image records, initally empty.
- `描画された~textを伴う要素~群@ ⇒ `要素$たちが成す`~list$ — 初期~時は空とする。 ◎ Each Document has a set of elements with rendered text, which is an ordered set of Elements, initially empty.
4.2.1. ~CSS仕様に対する改変
4.2.2. ~HTML仕様に対する改変
~UAは、 `Text$I node %~text を初回に塗るときは， 次の手続きを実行するベキである： ◎ When the user agent paints a Text node text for the first time, it should execute the following steps:
- ~IF［ %~text は、 それに利用される~font書体が`阻み期間$にあることに因り，塗られない ］ ⇒ ~RET ◎ If text will not be painted due to the font face being in its font block period, then return.
- ［ %~text の`包含塊$を確立している【！determine】`要素$ ］が`所有する~text~node群$に %~text を`付加する$set ◎ Let element be the Element which determines the containing block of text. ◎ Append text to element’s set of owned text nodes.
4.2.3. 読込ngを完遂した画像を処理する
`読込ngを完遂した画像を処理する@ ときは、 所与の ( `要素$ %要素, `画像~要請$ %画像~要請 ) に対し： ◎ To process an image that finished loading given an Element element and an image request imageRequest:
- %根 ~LET %要素 の`根$ ◎ Let root be element’s root.
- ~IF［ %根 は`文書$でない ］ ⇒ ~RET ◎ If root is not a Document, return.
- %今 ~LET `現在の高分解能~時刻$( %要素 に`関連な大域~obj$ ) ◎ Let now be the current high resolution time given element’s relevant global object.
- %記録 ~LET 新たな`処理待ち画像~記録$ — その ⇒＃ `要素$piR ~SET %要素, `要請$piR ~SET %画像~要請, `読込n時刻$piR ~SET %今 ◎ Let record be a pending image record with element element, request imageRequest and loadTime now.
- %根 の`描画~処理待ち画像~群$に %記録 を`付加する$【！add】 ◎ Add record to root’s images pending rendering.
4.3. 塗り計時の報告-法
4.3.1. 最初の有内容な塗り
次を満たす`文書$ %文書 は `最初の有内容な塗りを報告するべき@ であるとされる ⇒ ［ `first-contentful-paint^l ~NIN %文書 の`以前に報告した塗り群$ ］~AND［ %文書 は`塗り可能$かつ`有内容$な`要素$を 1 個は包含する ］ ◎ To know whether Document document should report first contentful paint, perform the following steps: • If document’s set of previously reported paints contains "first-contentful-paint", then return false. • If document contains at least one element that is both paintable and contentful, then return true. • Otherwise, return false.
4.3.2. 塗り計時を刻む
`塗り計時を刻む$ときは、 所与の ( `文書$ %文書 ) に対し，次の手続きを遂行する： ◎ When asked to mark paint timing given a Document document as input, perform the following steps:
- ~IF［ %文書 が`属する閲覧~文脈$は`塗り計時に適格$でない ］ ⇒ ~RET ◎ If the document's browsing context is not paint-timing eligible, return.
- %大域~obj ~LET %文書 に`関連な大域~obj$ ◎ ↓
- %塗り計時~報 ~LET 新たな`塗り計時~報$ — その ⇒＃ `描画~更新~終了~時刻$ptI ~SET `現在の高分解能~時刻$( %大域~obj ), 【`実装定義な呈示~時刻$ptI ~SET ~NULL】 ◎ Let paintTimingInfo be a new paint timing info, whose rendering update end time is the current high resolution time given document’s relevant global object.
- %塗られた画像~群 ~LET 新たな`有順序~集合$ ◎ Let paintedImages be a new ordered set
- %塗られた~text~node群 ~LET 新たな`有順序~集合$ ◎ Let paintedTextNodes be a new ordered set
-
%文書【！doc】 の`描画~処理待ち画像~群$を成す ~EACH( %記録 ) に対し： ◎ For each record in doc’s images pending rendering list:
-
~IF［ %記録 の`要請$piRは`可用$である 【 %記録 の`状態$ ~IN { `完全に可用$st, `部分的に可用$st } 】 ］~AND［ 塗るために準備済みである ］： ◎ If record’s request is available and ready to be painted, then run the following steps:
- %塗られた画像~群 に %記録 を付加する ◎ Append record to paintedImages.
- %文書 の`描画~処理待ち画像~群$から %記録 を除去する ◎ Remove record from doc’s images pending rendering list.
-
-
%文書 の`子孫$たちを成す ~EACH( `要素$ %要素 ) に対し： ◎ For each Element element in doc’s descendants:
- ~IF［ %要素 ~IN %文書 の`描画された~textを伴う要素~群$ ］ ⇒ ~CONTINUE ◎ If element is contained in doc’s set of elements with rendered text, continue.
- ~IF［ %要素 が`所有する~text~node群$は空である ］ ⇒ ~CONTINUE ◎ If element’s set of owned text nodes is empty, continue.
- %文書 の`描画された~textを伴う要素~群$に %要素 を`付加する$set ◎ Append element to doc’s set of elements with rendered text.
- %塗られた~text~node群 に %要素 を`付加する$set ◎ Append element to paintedTextNodes.
- %報告-済み塗り群 ~LET %文書 の`以前に報告した塗り群$ ◎ Let reportedPaints be the document’s set of previously reported paints.
- %~frame計時~報 ~LET %文書 の`現在の~frame計時~報$doc ◎ Let frameTimingInfo be document’s current frame timing info.
- %文書 の`現在の~frame計時~報$doc ~SET ~NULL ◎ Set document’s current frame timing info to null.
-
%塗り計時~群を書出す ~LET 次を遂行する手続き： ◎ Let flushPaintTimings be the following steps:
-
~IF［ `first-paint^l ~NIN %報告-済み塗り群 ］~AND［ ~UAは`最初の塗り$を刻むよう環境設定されている ］ ⇒ `塗り計時を報告する$( %文書, `first-paint^l, %塗り計時~報 ) ◎ If reportedPaints does not contain "first-paint", and the user agent is configured to mark first paint, then report paint timing given document, "first-paint", and paintTimingInfo.
注記： `最初の塗り$には、 既定の背景~塗りは含まれないが，既定でない背景~塗りは含まれる。 ◎ NOTE: First paint excludes the default background paint, but includes non-default background paint.
これは、 規範的な注記に転換されるベキである。 ◎ This should be turned into a normative note.
-
~IF［ %文書 は`最初の有内容な塗りを報告するべき$である ］ ⇒ `塗り計時を報告する$( %文書, `first-contentful-paint^l, %塗り計時~報 ) ◎ If document should report first contentful paint, then: • Report paint timing given document, "first-contentful-paint", and paintTimingInfo.
注記： 親~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.
注記： `文書$が［ `first-paint^l ／ `first-contentful-paint^l ］を刻むことは保証されない。 完全に白紙な`文書$は、 `最初の塗り$を決して刻まないであろう。 `有内容$でない要素しか包含しない`文書$は、 `最初の有内容な塗り$を決して刻まないであろう。 ◎ NOTE: A document is not guaranteed to mark "first-paint" or "first-contentful-paint". A completely blank document may never mark first paint, and a document containing only elements that are not contentful may never mark first contentful paint.
注記： `最初の塗り$を刻むことは、 任意選択である。 塗り計時を実装している~UAは、 少なくとも，`最初の有内容な塗り$を刻むベキである。 ◎ NOTE: The marking of first paint is optional. User-agents implementing paint timing should at the very least mark first contentful paint.
- `最~大な有内容な塗りを報告する$( %文書, %塗り計時~報, %塗られた画像~群, %塗られた~text~node群 ) ◎ Report largest contentful paint given document, paintTimingInfo, paintedImages and paintedTextNodes.
- `要素の計時を報告する$( %文書, %塗り計時~報, %塗られた画像~群, %塗られた~text~node群 ) ◎ Report element timing given document, paintTimingInfo, paintedImages and paintedTextNodes.
- ~IF［ %~frame計時~報 ~NEQ ~NULL ］ ⇒ `長い~animation~frame~entryを~queueする$( %文書, %~frame計時~報, %塗り計時~報 ) ◎ If frameTimingInfo is not null, then queue a long animation frame entry given document, frameTimingInfo, and paintTimingInfo.
-
- ~IF［ ~UAは`実装定義な呈示~時刻$ptIを~supportしない ］ ⇒＃ %塗り計時~群を書出す()； ~RET ◎ If the user-agent does not support implementation-defined presentation times, call flushPaintTimings and return.
-
この段は`並列的$に走らす： ◎ Run the following steps In parallel:
- 実装定義な時刻 — 現在の~frameが利用者へ呈示されるとき — まで待機する ◎ Wait until an implementation-defined time when the current frame has been presented to the user.
- %呈示~時刻 ~LET `現在の高分解能~時刻$( %大域~obj ) ◎ Set paintTimingInfo’s implementation-defined presentation time to the current high resolution time given document’s relevant global object.
-
~IF［ %文書 の`非同一-生成元~能力は隔離されるか？$enV ~EQ ~F ］： ◎ If document’s cross-origin isolated capability is false, then:
-
%呈示~時刻 ~SET %呈示~時刻 を次のように粗化した結果 ⇒ ~milli秒数で 4 の整数倍になる — または，それより粗くなる† — よう切り上げる
【† ［ 4 以上の数 ］の整数倍なのか［ 4 の倍数 ］の整数倍なのか明瞭でない。 】
◎ Coarsen paintTimingInfo’s implementation-defined presentation time to the next multiple of 4 milliseconds, or coarser. - `現在の高分解能~時刻$( %大域~obj ) が %呈示~時刻 になるまで待機する ◎ Wait until the current high resolution time is paintTimingInfo’s implementation-defined presentation time.
-
- %塗り計時~報 の`実装定義な呈示~時刻$ptI ~SET %呈示~時刻 ◎ ↑
- `大域~taskを~queueする$( `処理能~時列線~task~source$, %大域~obj, %塗り計時~群を書出す ) ◎ Queue a global task on the performance timeline task source given document’s relevant global object to run flushPaintTimings.
4.3.3. 塗り計時を報告する
`塗り計時を報告する$ときは、 所与の ( %文書, %塗り種別, `塗り計時~報$ %塗り計時~報 ) に対し，次の手続きを遂行する： ◎ To report paint timing given document, paintType, and a paint timing info paintTimingInfo as arguments, perform the following steps:
- %新たな~entry ~LET `新たな~obj$( `PerformancePaintTiming$I, %文書 に`関連な~realm$ ) ◎ Create a new PerformancePaintTiming object newEntry with document’s relevant realm and＼
- %新たな~entryの ⇒＃ `name$m 属性 ~SET %塗り種別, `entryType$m 属性 ~SET `paint^l, `startTime$m 属性 ~SET `既定の塗り時刻印$( %塗り計時~報 ), `duration$m 属性 ~SET 0 ◎ and set its attributes as follows: • Set newEntry’s name attribute to paintType. • Set newEntry’s entryType attribute to "paint". • Set newEntry’s startTime attribute to the default paint timestamp given paintTimingInfo. • Set newEntry’s duration attribute to 0.
- %新たな~entry の`塗り計時~報$ptM ~SET %塗り計時~報 ◎ Set newEntry’s paint timing info to paintTimingInfo.
- `処理能~entryを~queueする$( %新たな~entry )【！余計：in document’s relevant realm】 ◎ Queue newEntry in document’s relevant realm.
- %文書 の`以前に報告した塗り群$に %塗り種別 を`付加する$ ◎ Append paintType to document’s set of previously reported paints.
4.4. 共通な~algo
4.4.1. 塗り計時~用に公開されているか
所与の`要素$ %要素 は， 所与の`文書$ %文書 — 省略時は %要素 に`関連な設定群~obj$に`関連な大域~obj$に`結付けられた文書$ — において `塗り計時~用に公開されて@ いるとは、 ~AND↓ が満たされることをいう： ◎ To determine whether an Element element is exposed for paint timing, given a Document or null document, perform the following steps:
- %要素 は`接続されて$いる ◎ If element is not connected, return false. ◎ ↑↑ If document is null, let document be element’s relevant settings object's relevant global object's associated document.
- %文書 は`全部的に作動中$である ◎ If document is not fully active, return false.
- %要素 の`根$ ~EQ %文書 ◎ If element’s root is not equal to document, return false. ◎ ↑↑ Return true.
謝辞
技術的な~~意見, 示唆を寄せられ、 この仕様を改善へ導いた`すべての貢献者＠https://github.com/w3c/paint-timing/graphs/contributors$に，特別な謝意を。 ◎ Special thanks to all the contributors for their technical input and suggestions that led to improvements to this specification.