google浏览器控制台网络请求用时区别
在浏览器的开发者工具控制台中,通常可以看到一行显示了三个时间指标:完成用时、DOMContentLoaded、加载时间。这些时间指标用于帮助你了解网页的加载性能。
DOMContentLoaded
这个时间表示文档的初始 HTML 已完全加载和解析完成时的时间点,但不包括样式表、图片和子框架的加载。DOMContentLoaded 事件在 DOM 树构建完成后触发,此时 JavaScript 可以访问和操作 DOM 结构,但此时其他资源(如图片、样式表)可能还在加载中。通常,这个时间标记的是 DOM 结构完成的时刻。
使用performance可以获取dom加载的时间
window.addEventListener('load', () => {
// 获取 navigation entry
const [navigation] = performance.getEntriesByType('navigation');
if (navigation) {
setTimeout(() => {
console.log('Timing details:', {
"DOMready时间": navigation.domContentLoadedEventEnd - navigation.startTime,
});
})
} else {
console.warn('PerformanceNavigationTiming is not supported by this browser.');
}
});
加载时间
这个时间表示从用户请求页面开始,到页面完全加载(包括所有资源)所花费的时间。它是页面完全加载和渲染完成的时间点,也就是包括了页面及所有静态和动态资源的加载时间,包括 CSS、JavaScript、图片等所有资源的加载。
使用performance可以获取页面onload时间
"页面onload时间": navigation.loadEventEnd - navigation.startTime,
完成用时
这个时间表示从页面开始加载到页面完全加载并渲染完成的总时间。它包括了所有资源的加载时间、脚本的执行时间、样式表的应用以及可能的重排(reflow)和重绘(repaint)。简单来说,这是页面加载到用户可以交互的完整过程的时间。
这个完成用时没有找到performance接口可以输出的方式,我理解的就是这个时间也包含ajax网络请求以及用户在页面停留的时间(当切换路由页面时,这个完成用时就会加上停留页面的时间)