利用window.performance.timing检测页面加载速度

最新推荐文章于 2024-04-20 10:05:46 发布
最新推荐文章于 2024-04-20 10:05:46 发布
阅读量4.9k 收藏 5
点赞数 2
分类专栏： 前端 文章标签： performance html5 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q_12341234/article/details/42461255
版权
本文介绍了如何利用window.performance.timing API检测和分析页面加载速度，详细解释了各个性能指标的含义，并探讨了页面整体加载速度的计算方法。通过对各项指标的观察和比较，可以找出影响页面加载速度的因素，提升用户体验。
摘要由CSDN通过智能技术生成


如何在浏览器中查看当前页面请求各个指标数据

在控制台中输入window.performance.timing(html5的属性);即可

 

        

各字段的含义：

·         navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。

·   unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

·   unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

·   redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

·   

最低0.47元/天 解锁文章
xhmz
关注
专栏目录
window.performance.timing 字段说明和主要性能指标
scorpio的世界
10-28 4864
window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。 字段说明： connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。 domComplete：html文档完全解析完毕的时间节点。 domContentLoadedEventStart 和domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMConte.
利用window.performance.timing进行性能分析
01-05 767
利用window.performance.timing进行性能分析 性能分析。。。 window.performance.timing中相关属性语义： // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // .unloadEve...
用PerformanceTiming来检测页面性能
weixin_33874713的博客
06-19 307
window.performance.timing下的属性 navigationStart 当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 unloadEventStart 如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的U...
window.performance.timing属性详解
tree_stretch的博客
03-26 1547
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。表示同源的前一个文档卸载完成的时刻。
Performance API
weixin_47450807的博客
04-04 1607
一、写在前面 Performance api用于精确度量，控制，增强浏览器的性能表现。这个API为了测量网站性能，提供以前没有办法做到的精度。 比如：为了得到脚本运行的准确时间，需要一个高精度时间戳。传统的做法是使用Date对象的getTime方法。 var start = new Date().getTime() let i = 100 while(i) { console.log('111') i-- } var now = new Date().getTime() var latency
完整版检测浏览器网页是否载入完毕例程.e.rar
04-02
3. **window.performance API**：通过window.performance接口可以获取详细的页面加载性能指标，如navigation Timing API可以提供从页面开始加载到完全加载的时间。 4. **Progressive Web App (PWA)**：对于现代Web...
你的函数有多快？使用 performance 监控前端性能
Arui_0的博客
07-23 453
要比较两个函数哪个性能更好，一个直观且公平的方法就是计算两个函数分别执行完的时间。 良好的性能更容易好的用户体验，而好的用户体验更能留住用户。 研究表明，由于性能问题，在 88％ 的在线消费者对用户体验不满意后，他们不太可能会二次使用。 这也是为什么要提高性能的一个重要原因。 特别是使用 JS 开发时，编写的每一行 JS 都可能会阻塞DOM，因为它是单线程语言。 本次分享，我们主要介绍如何计算函数的性能。 Performance.now Performance是一个做前端性能监控离不开的API，最好在页面完
【JS】1691- 重学 JavaScript API - Performance API
pingan8787
05-23 691
❝前期回顾：1.Page Visibility API2. Broadcast Channel API3. Beacon API4.Resize Observer API5. Clipboard API6. Fetch API❞???? 1. 什么是 Performance API1.1 概念介绍Performance API 提供了「访问和测量浏览器性能相关信息」的方法。通过 Performanc...
页面打开计算性能 利用performance.timing进行性能分析
lotte
07-04 4204
window.onload = function(){ setTimeout(function(){ let t = performance.timing console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)) console.log('...
performance-timing
lay136362687的博客
08-14 1541
performance的兼容性 performance.timing对应时间节点 performance的获取方式 window.performance performance.timing的常用监测时间 DNS解析时间： domainLookupEnd - domainLookupStart TCP建立连接时间： connectEnd - connectStart 白...
PerformanceTiming
weixin_33690963的博客
08-20 108
navigationStart （前一个文档的卸载时间）准备加载新页面的时间，如果没有前一个文档，那么就返回timing.fetchStart的值 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart 如果是H...
前端性能监控window.performance.timing
xxc_yc的博客
07-01 555
window.performance
h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间...
热门推荐
AI天才研究院
09-15 1万+
在控制台中输入window.performance.timing(html5的属性); 各字段的含义： · navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 · unloadEventStart：如果前一个网页与当前网页属于同...
performance.timing各字段含义 网页从url到最终显示过程 性能优化
wgod
07-08 328
performance.timing各字段含义 网页从url到最终显示过程 性能优化
探索Web性能优化利器：`performance-timing`库
最新发布
gitblog_00009的博客
04-20 267
探索Web性能优化利器：performance-timing库 项目地址:https://gitcode.com/tjuking/performance-timing 在前端开发中，性能是衡量用户体验的重要指标之一。为了更好地监控和优化网页加载与交互性能，我们今天要向您推荐一个开源项目——tjuking/performance-timing。这是一个轻量级的JavaScript库，它封装了浏览器的...
JS 判断页面是第一次加载还是刷新window.performance.navigation.type
fitor_315228的博客
01-21 1776
JS高级程序设计第三版学习之路–25.5 web计时 页面性能一直都是 Web 开发人员最关注的领域。但直到最近，度量页面性能指标的唯一方式，就 是提高代码复杂程度和巧妙地使用 JavaScript 的 Date 对象。Web Timing API 改变了这个局面，让开发 人员通过 JavaScript 就能使用浏览器内部的度量结果，通过直接读取这些信息可以做任何想做的分析。 与本章介绍过的其他 API 不同，Web Timing API 实际上已经成为了 W3C 的建议标准，只不过目前支持 它的浏览器还不
一张浏览器加载时序图。以后有时间再分析
in your poker face
08-01 3415
navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart 如果是HTTP重定向，如果跳转都是同源的，则返回开始获取发起重定向的时间点
window.performance 性能监控
06-08
window.performance 是浏览器提供的一个 API，可以用来监控页面的性能。它提供了一些方法和属性，可以用来获取页面加载的各个阶段的时间，例如页面的 DNS 查询时间、TCP 连接时间、SSL 握手时间、DOM 渲染时间、页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值