performance-timing

最新推荐文章于 2026-06-21 14:52:32 发布
原创 最新推荐文章于 2026-06-21 14:52:32 发布 · 1.6k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
web总结记录

当前文章被收录于：

web总结记录
15 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了使用performance.timing API来监测网页加载过程中的关键时间点，包括DNS解析时间、TCP连接时间、白屏时间、DOM渲染完成时间和页面onload时间等，并解释了如何通过这些时间点来评估网页性能。
performance的兼容性

这里写图片描述

performance.timing对应时间节点

这里写图片描述
这里写图片描述

performance的获取方式
window.performance
performance.timing的常用监测时间

  • DNS解析时间： domainLookupEnd - domainLookupStart

  • TCP建立连接时间： connectEnd - connectStart

  • 白屏时间： responseStart - navigationStart

  • dom渲染完成时间： domContentLoadedEventEnd - navigationStart

  • 页面onload时间(首屏时间)： loadEventEnd - navigationStart

详细可看Navigation Timing获取页面加载各个阶段所需时间

标签
#performance
系统调优项
sdssee的博客
11-05 951
调整完之后需要reboot。
不止于扫描：用ESP32+BluetoothSerial库打造一个简易蓝牙设备探测器
weixin_30265103的博客
04-16 308
本文详细介绍了如何利用ESP32和BluetoothSerial库构建一个功能完善的蓝牙设备探测器，涵盖硬件选型、扫描优化、数据可视化及远程上报等关键步骤。通过异步扫描策略和OLED显示，实现高效设备检测与用户交互，适用于智能家居、零售分析等多种场景。
一张浏览器加载时序图。以后有时间再分析
in your poker face
08-01 3622
navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart 如果是HTTP重定向，如果跳转都是同源的，则返回开始获取发起重定向的时间点
详细介绍浏览器中 performance 的 API
qq_42880714的博客
11-08 2165
详细介绍浏览器中 performance 的 API
window.performance.timing属性详解
tree_stretch的博客
03-26 2312
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。表示同源的前一个文档卸载完成的时刻。
performance.timing
liangshanbo1215的博客
10-17 1237
是 Web 性能 API 的一部分，用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能，找出潜在的瓶颈。返回一个对象，该对象包含了多个属性，每个属性代表页面加载过程中的某个特定事件的时间戳。以下是一些常用的fetchStartconnectEnddomLoadingloadload。
浏览器性能接口performance.timing说明
u010501170的博客
08-05 1544
如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0。返回浏览器发起DNS查询的时间点，如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点。返回结束DNS查询的时间点，如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点。如果请求是用http get发起的，返回浏览器查缓存之前的时间点，否则返回发起获取资源的时间点。如果是同源重定向，返回重定向请求接收完最后一字节的时间点，否则返回0。...
利用window.performance.timing进行性能分析
thlzjfefe的博客
08-19 4376
性能分析。。。 window.performance.timing中相关属性语义： // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // .unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间 // ....
Performance timing API 中文解释
12点
07-02 295
Performance timing API 中文解释 navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart ...
利用window.performance.timing检测页面加载速度
xhmz的专栏
01-06 5133
如何在浏览器中查看当前页面请求各个指标数据 在控制台中输入window.performance.timing(html5的属性);即可            各字段的含义： ·         navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 ·   unloadEve
前端：performance.timing（首屏时间）的庖丁解牛
长风破浪会有时的博客
12-28 1053
概念现代方案核心价值测量页面加载各阶段耗时支持 Core Web Vitals首屏时间估算（精确（FCP/LCP）TTFB✅ 精确✅ 精确前端优化指导 HTML/JS 优化指导用户体验优化后端联动通过 TTFB 定位 PHP/DB 问题通过 Server-Timing 暴露内部耗时✅对 PHP 程序员的终极价值用证明：“慢”不是前端问题，而是后端 TTFB 高。掌握此 API，你就能用数据驱动前后端协作而非陷入“甩锅”争论。
页面打开计算性能 利用performance.timing进行性能分析
lotte
07-04 4354
window.onload = function(){ setTimeout(function(){ let t = performance.timing console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)) console.log('...
前端小技巧(2)-performance.timing属性介绍
weixin_34351321的博客
11-27 1553
performance.timing属性介绍: navigationStart 加载起始时间 redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0） redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间...
前端性能监控window.performance.timing
xxc_yc的博客
07-01 702
window.performance
【转载】利用window.performance.timing进行性能分析
weixin_30710457的博客
04-17 249
利用window.performance.timing进行性能分析 性能分析。。。 window.performance.timing中相关属性语义： // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // .unloadEventEnd...
window.performance.timing 字段说明和主要性能指标
scorpio的世界
10-28 5256
window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。 字段说明： connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。 domComplete：html文档完全解析完毕的时间节点。 domContentLoadedEventStart 和domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMConte.
扫描性能调优实战：TIMING与PERFORMANCE参数配置全解析
最新发布
weixin_29323049的博客
06-21 328
在网络扫描与安全评估领域，性能调优是提升效率与成功率的核心技术。其原理在于通过精确控制扫描请求的时序与并发参数，平衡扫描速度、资源消耗与隐蔽性。这项技术的核心价值在于，它能将通用扫描工具从简单的“发现器”升级为智能的“策略执行器”，从而适应从互联网Web应用评估到大型内网资产普查等多种复杂场景。通过合理配置TIMING参数（如扫描延迟、主机超时）和PERFORMANCE参数（如并发度、速率限制），工程师可以避免触发目标系统的防御机制（如WAF封禁），同时最大化利用自身硬件资源。本文聚焦于扫描时间与性能控制的
js performance.timing：利用performance.timing进行性能分析
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
08-19 1390
window.onload = function(){ setTimeout(function(){ let t = performance.timing console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).t...
h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间...
热门推荐
东海陈光剑的博客：禅与计算机程序设计艺术
09-15 1万+
在控制台中输入window.performance.timing(html5的属性); 各字段的含义： · navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 · unloadEventStart：如果前一个网页与当前网页属于同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值