window.performance.timing 字段说明和主要性能指标

最新推荐文章于 2024-06-20 16:54:04 发布
最新推荐文章于 2024-06-20 16:54:04 发布
阅读量4.8k 收藏 9
点赞数 4
分类专栏： 浏览器 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scorpio_h/article/details/109329123
版权
window.performance.timing API提供了浏览器性能详细信息，包括DNS查询、TCP连接、请求响应和DOM加载等关键时间点。主要性能指标如DNS查询耗时、TCP链接耗时、request请求耗时、解析DOM树耗时、白屏时间和DOMready时间，帮助开发者优化网页加载速度。
摘要由CSDN通过智能技术生成

window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。

字段说明：

connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。

domComplete：html文档完全解析完毕的时间节点。

domContentLoadedEventStart 和 domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

domInteractive：代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点。

domLoading：代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，

最低0.47元/天 解锁文章
scorpio_h
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用window.performance.timing检测页面加载速度
xhmz的专栏
01-06 4889
如何在浏览器中查看当前页面请求各个指标数据 在控制台中输入window.performance.timing(html5的属性);即可            各字段的含义： ·         navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 ·   unloadEve
Web性能时机API「Web Performance Timing API」-crx插件
03-09
使用性能定时API从您当前的网站上绘制常见的性能计时数据。...利用Web Performance API快速查看网站的网站性能。 它适用于软件工程师和一般对Web性能感兴趣的人员。 支持语言:English (United States)
利用window.performance.timing进行性能分析
01-05 750
利用window.performance.timing进行性能分析 性能分析。。。 window.performance.timing中相关属性语义： // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // .unloadEve...
Chrome 控制台 performance 性能分析
最新发布
不知道并不可怕，可怕的是自己不知道 “自己不知道”。
06-20 1900
（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。
window.performance.timing属性详解
tree_stretch的博客
03-26 1476
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。表示同源的前一个文档卸载完成的时刻。
前端性能监控window.performance.timing
xxc_yc的博客
07-01 536
window.performance
VGA-timing.rar_VGA timing_timing_vga
09-19
本资料"VGA-timing.rar"包含了一份关于VGA时序的深入分析，是初学者进入VGA测试领域的宝贵资源。 首先，我们要理解VGA时序的基本概念。VGA时序主要包括行同步信号（Horizontal Sync）、场同步信号（Vertical Sync）...
STA.zip_static timing_tool
09-22
它主要关注两个关键指标：建立时间（Setup Time）和保持时间（Hold Time），以保证数据在输入和输出之间正确传输。 “STA.zip_static timing_tool”是一款专为静态时序分析设计的工具，它集成了先进的算法和优化...
Matlab.rar_wifi timing
09-22
5. **性能评估**：通过误码率（BER）、同步精度等指标来评估同步效果。 通过深入研究这些案例，我们不仅可以掌握Matlab在通信系统建模中的技巧，还能理解不同同步算法的优缺点，为实际通信系统的优化提供理论支持。...
Txacking.rar_symbol timing
07-13
通过对这些文件的深入理解，可以构建一个完整的符号定时跟踪系统模型，并通过MATLAB进行仿真和优化，以实现最佳的定时精度和通信性能。这种技术对于提高数字通信系统的整体效率和可靠性具有重要意义。
页面打开计算性能 利用performance.timing进行性能分析
lotte
07-04 4184
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 1528
performance的兼容性 performance.timing对应时间节点 performance的获取方式 window.performance performance.timing的常用监测时间 DNS解析时间： domainLookupEnd - domainLookupStart TCP建立连接时间： connectEnd - connectStart 白...
h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间...
热门推荐
禅与计算机程序设计艺术
09-15 1万+
在控制台中输入window.performance.timing(html5的属性); 各字段的含义： · navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 · unloadEventStart：如果前一个网页与当前网页属于同...
Performance timing API 中文解释
12点
07-02 197
Performance timing API 中文解释 navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart ...
JS - 利用performance.timing进行性能分析
技术共享，共同进步！
03-09 897
window.onload = function(){ setTimeout(function(){ let t = performance.timing console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)) console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
performance.timing各字段含义 网页从url到最终显示过程 性能优化
wgod
07-08 313
performance.timing各字段含义 网页从url到最终显示过程 性能优化
探索Web性能优化利器：`performance-timing`库
gitblog_00009的博客
04-20 249
探索Web性能优化利器：performance-timing库 项目地址:https://gitcode.com/tjuking/performance-timing 在前端开发中，性能是衡量用户体验的重要指标之一。为了更好地监控和优化网页加载与交互性能，我们今天要向您推荐一个开源项目——tjuking/performance-timing。这是一个轻量级的JavaScript库，它封装了浏览器的...
window.performance 性能监控
06-08
window.performance 是浏览器提供的一个 API，可以用来监控页面的性能。它提供了一些方法和属性，可以用来获取页面加载的各个阶段的时间，例如页面的 DNS 查询时间、TCP 连接时间、SSL 握手时间、DOM 渲染时间、页面资源加载时间等等。开发人员可以利用这些信息来优化页面性能，提高用户体验。比如可以使用 performance.timing 来获取页面加载时间，使用 performance.memory 来获取内存占用情况，还可以使用 performance.mark 和 performance.measure 来进行自定义性能监控。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值