window.performance是HTML5 的一个新API。

API详细文档传送门:https://developer.mozilla.org/en-US/docs/Web/API/Window/performance

浏览器一般的加载顺序如下图:

所以根据上面的时间点,我们可以计算常规的性能值,如下:

(使用该api时需要在页面完全加载完成之后才能使用,最简单的办法是在window.onload事件中读取各种数据,因为很多值必须在页面完全加载之后才能得出。)

var timing = window.performance && window.performance.timing;

var navigation = window.performance && window.performance.navigation;

重定向次数:

var redirectCount = navigation && navigation.redirectCount;

跳转耗时:

var redirect = timing.redirectEnd - timing.redirectStart;

APP CACHE 耗时:
var appcache = Math.max(timing.domainLookupStart - timing.fetchStart, 0);

DNS 解析耗时:
var dns = timing.domainLookupEnd - timing.domainLookupStart;

TCP 链接耗时:
var conn = timing.connectEnd - timing.connectStart;

等待服务器响应耗时(注意是否存在cache):
var request = timing.responseStart - timing.requestStart;

内容加载耗时(注意是否存在cache):
var response = timing.responseEnd - timing.responseStart;

总体网络交互耗时,即开始跳转到服务器资源下载完成:
var network = timing.responseEnd - timing.navigationStart;

渲染处理:
var processing = (timing.domComplete || timing.domLoading) - timing.domLoading;

抛出 load 事件:
var load = timing.loadEventEnd - timing.loadEventStart;

总耗时:
var total = (timing.loadEventEnd || timing.loadEventStart || timing.domComplete || timing.domLoading) - timing.navigationStart;

可交互:
var active = timing.domInteractive - timing.navigationStart;

请求响应耗时,即 T0,注意cache:
var t0 = timing.responseStart - timing.navigationStart;

首次出现内容,即 T1:
var t1 = timing.domLoading - timing.navigationStart;

内容加载完毕,即 T3:
var t3 = timing.loadEventEnd - timing.navigationStart;

转载于:https://www.cnblogs.com/joyho/articles/4384306.html

使用window.performance对应用性能监测相关推荐

  1. 前端性能监控-window.performance

    在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来,如果让你选择,你会用哪一个? Performance是一个做前端性能监控离不开的API, ...

  2. Linux按照CPU、内存、磁盘IO、网络性能监测

    系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长期和持续的过程,不 是说现在优化了,测试了,以后就可以一劳永逸了,也不是说书本上 ...

  3. Linux 性能监测

    Linux 性能监测:介绍 看了某某教程.读了某某手册,按照要求改改某某设置.系统设定.内核参数就认为做到系统优化的想法很傻很天真:)系统优化是一项复杂.繁琐.长期的 工作,优化前需要监测.采集.测试 ...

  4. Android 性能监测工具,优化内存、卡顿、耗电、APK的方法

    导语     安卓大军浩浩荡荡,发展已近十个年头,技术优化月新日异,如今 Android 9.0 代号P  都发布了,Android系统性能已经非常流畅了.但是,到了各大厂商手里,改源码自定系统,使得 ...

  5. 十三个强大的Linux性能监测工具

    Linux系统下,大多数的性能监测工具保存在/proc目录下.这里我们将Linux AS 和 SUSE LINUX EnterpriseServer中的命令行及图形方式下的性能监测工具做概括性介绍.这 ...

  6. iOS hybrid App 的实现原理及性能监测

    作者董一凡自述:作为一名写了十年代码的程序员,目前我最擅长的领域是移动平台的客户端开发,在移动领域的开发时间超过七年,前前后后涉猎过很多个平台.随着大部分移动平台自己走向死亡,现在我也主要专注在了iO ...

  7. [转]iOS hybrid App 的实现原理及性能监测

    转自:http://www.cocoachina.com/ios/20151118/14270.html iOS hybrid App 的实现原理及性能监测 2015-11-18 11:39 编辑:  ...

  8. 判断中转页面入口window.performance.navigation.type

    本文转载自:https://blog.csdn.net/zhouziyu2011/article/details/70673123 今天遇到一个问题 A---------中转页面----------B ...

  9. 使用performance进行网页性能监控

    由于项目需要, 需要对网页的一些性能进行监控, 接触到了performance, window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据, 将这些数据存储为 ...

最新文章

  1. 帝国cms上传大图片分片大视频大文件webuploader插件
  2. Py入门第二天 ,喜欢的老铁可以关注一波 ,没准儿哪天就不更了。。。
  3. Python怎么安装第三方库-numpy-libnum等; (详细版)
  4. 项目常用第三方库 Swift版
  5. python_装饰器
  6. IIS6.0不支持ASP的解决办法
  7. HTTP 响应的分块传输
  8. java编写一个邮件程序显示收件箱中所有的邮件列表_如何使用JavaMail获取邮件帐户中的可用文件夹列表...
  9. Python找出列表的中只出现一次的元素
  10. Nginx configure
  11. 在网页HTML中嵌入QQ、MSN、旺旺、Gtalk快速对话框代码
  12. Proteus 8.9SP2仿真软件
  13. 2020-05-19
  14. 极限学习机 Extreme Learning Machines 介绍
  15. 【附源码】计算机毕业设计JAVA校园代办业务系统
  16. Linux安装Docker CE
  17. QTP - 29 What’s New in QTP QTP的一些功能介绍
  18. 风险预测模型_慢性肾脏病孕妇妊娠风险预测模型的构建及验证
  19. MySQL中文乱码问题处理详解
  20. 三极管(8050)3.3v转5v电平转换及转换速率的测试

热门文章

  1. cmd下运行java文件时,找不到或无法加载主类的解决方法
  2. 细说CSS的transform
  3. 软件测试中英文词汇对照表
  4. 【Java从0到架构师】git 入门和基本应用
  5. element 让日期选择器一直显示选择面板
  6. Linux 的字符串截取很有用。有八种方法。
  7. [转]知乎大神YaqiLYU关于tracking方向的2013-2016趋势总览!!!强烈推荐!!!
  8. GBDT(MART) 迭代决策树入门教程
  9. 熬夜整理出30张可视化大屏模板,不敲一个代码就能直接套用
  10. 数据分析只能当一辈子取数机?可能你缺少这个基础思维