HTML DOM 窗口性能属性

HTML DOM 窗口性能属性是浏览器提供的一组用于评估网页性能的API。这些属性允许开发者测量网页性能，从而了解它们的应用程序的性能瓶颈，并作出合适的调整。

window.performance 对象

window.performance 对象是 HTML DOM 窗口性能属性的核心。它提供许多有用的子属性和方法，用于测量页面的各个方面。

window.performance.timing

window.performance.timing 提供了一组子属性，用于测量在页面加载期间发生的各个事件。这些属性包括：

• navigationStart: 开始导航的时间戳。
• responseEnd: 最后一个响应结束的时间戳。
• domComplete: DOM 解析完成的时间戳。
• loadEventEnd: 网页完全加载的时间戳。

通过比较这些时间戳，开发者可以确定页面加载过程中的性能瓶颈。

const performance = window.performance;
const navigationStart = performance.timing.navigationStart;
const responseEnd = performance.timing.responseEnd;
const domComplete = performance.timing.domComplete;
const loadEventEnd = performance.timing.loadEventEnd;

console.log('整个页面加载用时：', loadEventEnd - navigationStart);
console.log('服务器响应用时：', responseEnd - navigationStart);
console.log('DOM 解析用时：', domComplete - responseEnd);

window.performance.memory

window.performance.memory 子属性提供了有关装载页面时JavaScript堆的使用情况的信息。

• jsHeapSizeLimit: 以字节为单位的内存大小限制。
• totalJSHeapSize: 以字节为单位的堆内存使用量。
• usedJSHeapSize: 以字节为单位的已用内存数。

const performance = window.performance;
const jsHeapSizeLimit = performance.memory.jsHeapSizeLimit;
const totalJSHeapSize = performance.memory.totalJSHeapSize;
const usedJSHeapSize = performance.memory.usedJSHeapSize;

console.log('JavaScript堆内存使用：', usedJSHeapSize / 1024 / 1024, 'MB');

总结

HTML DOM 窗口性能属性是测量网页性能的强大工具。它们允许开发者监视HTTP请求和响应流、DOM加载、脚本执行等方面，并在必要时做出相应的优化措施。这些属性对于应用程序优化和调试非常重要。