PerformanceNavigationTiming: domInteractive 属性
domInteractive 只读属性返回一个 DOMHighResTimeStamp，表示用户代理将文档的 readyState 设置为 "interactive" 之前的确切时间。
注意：此属性不是 可交互时间 (TTI)。此属性指的是 DOM 构建完成并且 JavaScript 可以与之交互的时间。另请参阅 Document.readyState 的 interactive 状态，它与此属性相对应。
除非您的网站拥有非常大的 HTML 源来构建文档对象模型 (DOM)，否则测量 DOM 处理时间可能并不重要。
如果没有解析器阻塞的 JavaScript，那么 domInteractive 之后会立即触发 DOMContentLoaded 事件（有关时间戳，请参阅 domContentLoadedEventStart）。
值
一个 DOMHighResTimeStamp，表示用户代理将文档的 readyState 设置为 "interactive" 之前的确切时间。
示例
记录 DOM 交互时间
domInteractive 属性可用于记录 DOM 构建已完成并且可以与之交互的时间。
使用 PerformanceObserver 的示例，它会在浏览器性能时间线中记录新的 navigation 性能条目时通知您。使用 buffered 选项可以访问观察者创建之前的条目。
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(
`${entry.name}: domInteractive time: ${entry.domInteractive}ms`,
);
});
});
observer.observe({ type: "navigation", buffered: true });
使用 Performance.getEntriesByType() 的示例，它仅显示在调用方法时浏览器性能时间线中存在的 navigation 性能条目。
js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
console.log(`${entry.name}: domInteractive time: ${entry.domInteractive}ms`);
});
规范
| 规范 |
|---|
| 导航计时 Level 2 # dom-performancenavigationtiming-dominteractive |
浏览器兼容性
加载中…