Element Timing API: added to DOM, painted, ...

[igrigorik]

(discussed at TPAC 2016; rough notes and summary of discussed ideas below)

Read Hero Element Timing API doc for motivation and use cases. In addition to "painted", it might be useful to expose other points in the element lifecycle (e.g. added to DOM) and generalize this proposal to support different metrics. For example...

<div timing="dom, paint" id="super-important-header">
  <img src="/header.jpg" alt="why we're awesome">
  <p>...</p>
</div>

Which could result in multiple PerformanceEntries: one for added to DOM, one for when element is painted... or some such. Related questions and discussions at TPAC:

• We need to carefully define what "painted" means for nested elements - e.g. account for background images; CSS backgrounds (?); video (?), etc.
• How do we link back to the element in question? Use and surface provided ID? Point to element?
• We need to consider CORS and privacy/security implications of exposing this data.
• Document privacy/security considerations and implications for usual types of paint attacks, etc.

note: if this mechanism is available and developers annotate their pages, then it could enable us to define "first meaningful paint" as the time when the "hero element(s)" contained in the initial viewport are painted.

[igrigorik]

There's been a few attempts at tackling this space over the last few years.

Current focus is on investigating "Hero Text Element Timing". Relevant docs:

• Hero Text Element Timing
• Hero Text Element Timestamps