performance-timing

最新推荐文章于 2024-03-26 21:30:31 发布
最新推荐文章于 2024-03-26 21:30:31 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： web总结记录 文章标签： performance
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lay136362687/article/details/81664433
版权
performance的兼容性

这里写图片描述

performance.timing对应时间节点

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

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

  • DNS解析时间： domainLookupEnd - domainLookupStart

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

  • 白屏时间： responseStart - navigationStart

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

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

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

lqy136362687
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面性能分析,前端性能监控之performance
weixin_42463480的博客
06-03 1220
如果我们想要对一个网页进行性能监控，那么使用window.performance是一个比较好的选择。我们通过window.performance可以获取到用户访问一个页面的每个阶段的精确时间,从而对性能进行分析。一、页面性能监控1、利用performance.timing来监控网页的性能网页的整个生命周期PerformanceTiming属性如下PerformanceTiming.navigati...
performance-bookmarklet:Performance-Bookmarklet通过Resource Timing API，Navigation Timing API和User-Timing帮助分析当前页面-按类型，域，加载时间，标记等进行的请求。 轻量级的实时WebPageTest
04-01
性能手册 书签， 和通过 ， 和 （按类型，域，加载时间，标记等进行的请求）来分析当前页面，这是一种实时的WebPageTest。 只需将其添加到新书签的URL部分中即可： [removed](function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy
window.performance.timing属性详解
最新发布
tree_stretch的博客
03-26 612
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。表示同源的前一个文档卸载完成的时刻。
一张浏览器加载时序图。以后有时间再分析
in your poker face
08-01 3371
navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart 如果是HTTP重定向，如果跳转都是同源的，则返回开始获取发起重定向的时间点
h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间...
热门推荐
禅与计算机程序设计艺术
09-15 1万+
在控制台中输入window.performance.timing(html5的属性); 各字段的含义： · navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 · unloadEventStart：如果前一个网页与当前网页属于同...
Performance前端性能监控利器
zhxh0376的专栏
03-29 844
Performance前端性能监控利器,前端性能监
web计时机制——performance对象
weixin_33725722的博客
03-09 262
前面的话 　　页面性能一直都是Web开发人员比较关注的领域。但在实际应用中，度量页面性能的指标，是javascript的Date对象。Web Timing API改变了这个局面，让开发人员通过javascript就能使用浏览器内部的度量结果，给出了页面加载和渲染过程的很多信息，对性能优化非常有价值。本文将详细介绍web Timing API——performance对象   简述 　　We...
performance 优化
郑州彭于晏
09-18 1284
https://www.cnblogs.com/tugenhua0707/p/10982332.html 本文转载 Performance --- 前端性能监控 2019-06-05 22:23  龙恩0707  阅读(4429)  评论(1)  编辑  收藏  举报 Performanc
page-timing::stopwatch:测量浏览器计时并执行一些操作
05-12
import { navigation , paint } from 'page-timing' ; ( async ( ) => { const results = await Promise . all ( [ paint ( ) , navigation ( ) ] ) ; const metrics = Object . assign ( ... results ) ; ...
navigation-timing：导航时间
02-06
navigation-timing：导航时间
High Performance IC Timing-开源
04-28
用C ++编写的静态时序分析程序。 编译电路几何的Cadence LEF / DEF定义和同步电路的电路时序数据的SDF定义，以便为非零偏斜电路操作生成时序约束。
Web性能时机API「Web Performance Timing API」-crx插件
03-09
使用性能定时API从您当前的网站上绘制常见的性能计时数据。 利用Web Performance API快速查看网站的网站性能。 它适用于软件工程师和一般对Web性能感兴趣的人员。 支持语言:English (United States)
user-timing:用户计时
05-06
开发人员可以通过performance.mark()来创建此类对象performance.mark()并可以通过performance.getEntriesByType('mark') （或其他获取方法performance.getEntriesByType('mark')查询现有条目；请参见或通过...
window.performance.timing 字段说明和主要性能指标
scorpio的世界
10-28 4607
window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。 字段说明： connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。 domComplete：html文档完全解析完毕的时间节点。 domContentLoadedEventStart 和domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMConte.
Performance — 前端性能监控利器 方法详解
huangkang1995的博客
11-20 1005
转载 https://www.cnblogs.com/bldxh/p/6857324.html 最近在写一个监控脚本，终于有机会接触到了这一块，整理后写下了本文。 Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 属性 timing （PerformanceTiming） 从输入url到用户可以使用页面的全过程时间统计，会返回一个PerformanceTimin
使用performance进行前端性能监控
weixin_33985507的博客
01-02 288
该文章仅作为自己的总结 1.performance.timing对象 navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的...
网页性能调试
huangpb的博客
02-16 3084
页面帧（Performance -> FPS，Rendering -> FPS meter）、事件（Performance -> Event Log）和实际内存（Memory，Performance Monitor -> JS heap size）使用三个方面发现程序的问题。 如果一个页面比较卡，可能是由以下几方面造成的： 内存泄露。使用 Memory 的3次快照查看总...
用PerformanceTiming来检测页面性能
weixin_33874713的博客
06-19 291
window.performance.timing下的属性 navigationStart 当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 unloadEventStart 如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的U...
3、Chrome之前端性能指标
LetsStudy的博客
08-04 1554
a、RAIL 模型 ​RAIL​ 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能。 1.响应：输入延迟时间（从点按到绘制）小于 100 毫秒。 一般指的是用户输入网页快速给出结果的过程，比如点击按钮，切换表单，启动动画之类的。 2.动画：每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒。 指的是涉及style，layout，paint，composite过程的行为。比如：用户滚动页面，拖动刷新，页面动画等 3.空.
window.onload(()=>{ console.log(new Date() \- performance.timing.navigationStart,'首屏时间'); });这个语法怎么修改
07-15
这个语法有一个小错误，应该是`window.... console.log(new Date() - performance.timing.navigationStart, '首屏时间'); }; ``` 这样修改后，`onload`事件会在页面加载完成时触发，并在控制台打印出首屏加载时间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值