您正位於 MDN Web Docs 的可編輯版本

以 MDN Web Docs 使用者身分檢視: https://developer.mozilla.org/zh-TW/docs/Web/API/PerformancePaintTiming

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The PerformancePaintTiming interface of the Paint Timing API provides timing information about "paint" (also called "render") operations during web page construction. "Paint" refers to conversion of the render tree to on-screen pixels.

An application can register a PerformanceObserver for "paint" performance entry types and the observer can retrieve the times that paint events occur. Use this information to help identify areas that take too long to provide a good user experience.

Properties

This interface has no properties but it extends the following PerformanceEntry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows:

PerformanceEntry.entryType
Returns "paint".
PerformanceEntry.name
Returns either "first-paint" or "first-contentful-paint".
PerformanceEntry.startTime
Returns the timestamp when the paint occurred.
PerformanceEntry.duration
Returns 0.

Methods

This interface has no methods.

Example

function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType('paint');
    performanceEntries.forEach( (performanceEntry, i, entries) => {
      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    });
  } else {
    console.log('Performance timing isn\'t supported.');
  }
}

The code above produces console output something like the following:

The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.

Specifications

Specification Status Comment
Paint Timing
The definition of 'PerformancePaintTiming' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
PerformancePaintTimingChrome Full support 60Edge Full support ≤79Firefox ? IE No support NoOpera Full support 47Safari No support NoWebView Android Full support 60Chrome Android Full support 60Firefox Android ? Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 8.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

文件標籤與貢獻者

最近更新: Rumyra,