JS 如何获取 请求开始时间、请求结束时间、DNS解析时间、连接时间、首字节时间、传输时间等-icode9专业技术文章分享
2024/1/11 6:03:41
本文主要是介绍JS 如何获取 请求开始时间、请求结束时间、DNS解析时间、连接时间、首字节时间、传输时间等-icode9专业技术文章分享,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在 JavaScript 中,可以使用浏览器提供的 Performance API 来获取请求的各个性能指标,包括请求开始时间、请求结束时间、DNS解析时间、连接时间、首字节时间、传输时间等。下面是一些常用的方法和属性:
performance.timing
: 这是 Performance API 中的一个属性,它提供了许多与页面加载和请求相关的时间戳。通过读取其中的属性,可以获取请求开始时间、请求结束时间和其他一些性能指标。例如:
const startTime = window.performance.timing.requestStart; const endTime = window.performance.timing.responseEnd; const dnsTime = window.performance.timing.domainLookupEnd - window.performance.timing.domainLookupStart; const connectTime = window.performance.timing.connectEnd - window.performance.timing.connectStart; const responseStart = window.performance.timing.responseStart; const responseEnd = window.performance.timing.responseEnd; const transferTime = responseEnd - responseStart;
JavaScript
PerformanceEntry
: 通过使用performance.getEntries()
或performance.getEntriesByType('resource')
方法,可以获取请求的 PerformanceEntry 对象数组。每个 PerformanceEntry 对象包含了特定请求的性能指标,例如:
const entries = performance.getEntriesByType('resource'); const firstEntry = entries[0]; const dnsTime = firstEntry.domainLookupEnd - firstEntry.domainLookupStart; const connectTime = firstEntry.connectEnd - firstEntry.connectStart; const responseStart = firstEntry.responseStart; const responseEnd = firstEntry.responseEnd; const transferTime = responseEnd - responseStart;
JavaScript
- Navigation Timing API: 如果要获取页面导航请求的性能指标,可以使用 Navigation Timing API。例如:
const navigationTiming = performance.getEntriesByType('navigation')[0]; const startTime = navigationTiming.requestStart; const endTime = navigationTiming.responseEnd; const dnsTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart; const connectTime = navigationTiming.connectEnd - navigationTiming.connectStart; const responseStart = navigationTiming.responseStart; const responseEnd = navigationTiming.responseEnd; const transferTime = responseEnd - responseStart;
JavaScript
请注意,这些指标的单位是毫秒(ms),并且浏览器支持程度可能会有所不同。另外,这些方法和属性只能获取到指定请求的性能指标,无法获取到其他请求或资源的性能数据。
标签: 来源:
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
这篇关于JS 如何获取 请求开始时间、请求结束时间、DNS解析时间、连接时间、首字节时间、传输时间等-icode9专业技术文章分享的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-19vue2 开发移动端h5 使用那个ui框架比较好?-icode9专业技术文章分享
- 2024-11-19ReactJS结合TypeScript、Vite、Redux和TanStack (React Query) 实战教程
- 2024-11-19Vue3资料入门教程:零基础快速上手指南
- 2024-11-19Vue3资料:新手入门教程与实战指南
- 2024-11-19Vue资料:新手入门vue.js教程与实践指南
- 2024-11-19Vue资料:初学者入门指南
- 2024-11-18tcpdf可以等待vue动态页面加载完成后再生成pdf吗?-icode9专业技术文章分享
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南