【JS】前端性能分析之 window.performance

最新推荐文章于 2022-09-25 01:05:12 发布

AsnLee

最新推荐文章于 2022-09-25 01:05:12 发布

阅读量1.2k

点赞数

分类专栏： JS 奇淫技巧文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_41597258/article/details/106171420

版权

本文探讨了使用JavaScript中的window.performance接口来分析前端性能的方法。通过这个接口，开发者可以获得精确的时间戳，从而衡量网页加载的各个阶段耗时。重点介绍了performance.timing属性及其包含的页面性能数据，并提供了基于ES6的简单实现示例，帮助理解浏览器兼容性和性能监控。

摘要由CSDN通过智能技术生成

在这里插入图片描述

Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数（由 window 对象的 performance 属性提供）测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳，可以更加精准的计算脚本运行的时间

效果预览⬇️，参考简书的网页源代码实现，控制台切换成 H5 即可
在这里插入图片描述

API

performance对象的timing属性指向一个对象，它包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时。我们在chrome中输入performance.timing就可以看到下面的数据
在这里插入图片描述
参数详解，⚠️performance.timing的所有属性都是只读属性

navigationStart：是一个无符号long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳。如果没有上一个文档，这个值会和PerformanceTiming.fetchStart相同。
unloadEventStart：是一个无符号long long 型的毫秒数，表征了unload事件抛出时的UNIX时间戳。如果没有前一个网页，或者之前的网页跳转重定向不是在同一个域名内, 这个值会返回0.
unloadEventEnd：是一个无符号long long 型的毫秒数，表征了unload事件处理完成时的UNIX时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内， 这个值会返回0.
redirectStart：是一个无符号long long 型的毫秒数，表征了第一个HTTP重定向开始时的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.
redirectEnd：是一个无符号long long 型的毫秒数，表征了最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个bite直接被收到的时间）的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.
fetchStart：是一个无符号long long 型的毫秒数，表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前。
domainLookupStart：是一个无符号long long 型的毫秒数，表征了域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。
domainLookupEnd：是一个无符号long long 型的毫秒数，表征了域名查询结束的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。
connectStart：返