JavaScript Element elementTiming Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ELEMENTTIMING

Definition

Element.elementTiming is a string that identifies an element for observation in the PerformanceElementTiming API. It reflects the HTML elementtiming attribute (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.elementTiming. Start with this line.

JavaScript
element.elementTiming
CallWhat it does
element.elementTimingPrimary signature.

Built into the browser. Read or assign el.elementTiming — no import required.

Library declarations
JavaScript
element.elementTiming

Parameters

ParameterDescription
Identifier stringRequired. Label for the timed element

Return Value

Return ValueDescription
*String identifier

JavaScript Examples

Example 1 — Read the Identifier

Read elementTiming from an image marked in HTML (MDN shape).

JavaScript
const el = document.getElementById("myImage");
// <img id="myImage" elementtiming="big-image" …>

console.log(el.elementTiming);  // "big-image"
Try It Yourself

How It Works

  1. Mark in HTML. elementtiming="big-image" opts the image into Element Timing.
  2. Find the node. getElementById("myImage") returns the image.
  3. Read the property. It reflects the attribute as a string.
  4. Result. "big-image" — your chosen identifier.

Example 2 — Set the Identifier in JS

Assign elementTiming and confirm the HTML attribute updates.

JavaScript
const el = document.getElementById("myImage");

el.elementTiming = "hero";
console.log(el.elementTiming);                    // "hero"
console.log(el.getAttribute("elementtiming"));    // "hero"
Try It Yourself

How It Works

  1. Assign the property. el.elementTiming = "hero" sets the reflected attribute.
  2. Read it back. The property returns "hero".
  3. Check the attribute. getAttribute("elementtiming") matches.
  4. Use case. Handy when you mark elements after they are created in script.

Example 3 — Feature-Detect Safely

Guard reads so unsupported browsers do not throw or mislead.

JavaScript
if ("elementTiming" in Element.prototype) {
  const el = document.getElementById("myImage");
  console.log(el.elementTiming || "(empty)");
} else {
  console.log("not supported");
}
Try It Yourself

How It Works

  1. Detect first. Experimental APIs must be gated.
  2. Read when available. Use || "(empty)" so a missing mark is obvious.
  3. Fallback. Log or skip timing features on unsupported engines.
  4. Rule. Never assume Firefox/Safari expose this property today.
Compatibility

Browser Support

Element.elementTiming is Experimental with Limited availability (MDN: not Baseline). Primarily Chromium-based browsers; Firefox and Safari generally lack Element Timing.

✓ Experimental · Limited

Element.elementTiming

String reflecting the elementtiming attribute — opt-in label for PerformanceElementTiming.

Limited Not Baseline
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
elementTiming Detect first

Bottom line: Gate with if ("elementTiming" in Element.prototype). Use Element Timing as an enhancement for Chromium analytics, not as a hard dependency.

Frequently Asked Questions

It identifies an element for observation by the PerformanceElementTiming API. The property reflects the elementtiming HTML attribute as a string.
MDN marks Element.elementTiming as Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard. Always feature-detect before production use.
Add the elementtiming attribute in HTML (for example elementtiming="big-image") or set el.elementTiming = "big-image" in JavaScript where supported.
A string — the identifier you chose for that element. An empty string when the attribute is missing.
Primarily Chromium-based browsers. Firefox and Safari generally do not support Element Timing yet — check MDN compatibility and feature-detect.
Observe PerformanceEntry records of type "element" with PerformanceObserver, or use PerformanceElementTiming entries. See MDN PerformanceElementTiming for the full flow.

Next: firstElementChild

Learn how to read the first child that is an Element node.

firstElementChild tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element customElementRegistry Property JavaScript Element firstElementChild Property