Naiviation timeing API 时间统计

用于 web 应用 获取浏览器的相关时间信息。

performanceTiming 接口

navigationStart
  • 由上一个页面跳入当前页,返回上一个页面的 unload 时刻
  • 没有上一个页面 当前页面的第一个请求开始的时刻
unloadEventStart

如果上一个页面与当前页面同域,返回上一个页面的 unload 事件触发的时刻,如果没有上一个页面,或者上一个页面不是同域的,返回 0。

unloadEventEnd

上一个同源页面的 unload 事件响应结束时间,非同源或没有上一个页面则返回 0 。

redirectStart

由同源页面定位过来的页面,返回重定向开始的时间,反之为0。

redirectEnd

由同源页面定位过来的页面,返回最后一次接收重定向响应的时间,反之为0。

domainLookupStart

返回用户代理域名查询的前的时间点。如果页面从现有的链接或者从缓存中加载,这个属性返回与请求开始相同的时间

domainLookupEnd

返回用户代理域名查询的前的时间点。如果页面从现有的链接或者从缓存中加载,这个属性返回与请求开始相同的时间。

如果域名 dns 解析被缓存,domainLookupStart domainLookupEnd 代表了从本地缓存中获取的时间。

connectStart

浏览器建立首次链接请求的时刻。如果页面从缓存中加载,则返回与 domainLookupEnd 相等的时刻。

connectEnd

浏览器完成首次链接请求的时刻。如果页面从缓存中加载,则返回与 domainLookupEnd 相等的时刻。这部分时间包括 SSL 握手,和 Socks 认证的时间。

如果连接失败用户代理重新连接,connectStart, connectEnd 返回新的连接时刻点。

secureConnectionStart

如果当前页面使用的是 https 请求,返回用户代理开始建立连接的时刻。否则返回 0。

requestStart

请求读取文档开始的时间(完成建立连接),包括从本地读取缓存。如果请求失败,requestStart 返回新的请求的时间。

responseStart

用户代理接收到服务器的响应的时刻, 或从缓存中读取的时刻。

responseEnd

用户代理完成接收服务器响应的时刻或者请求链接关闭的时刻,

domLoading

返回 document.readiness 状态被置为 loading 的时刻。

document readyState
loading: 文档正在被加载
interactive: 完成解析并在加载引用资源
complete: 完成引用资源全部加载完成。
使用事件 readyStateChange 接收两次 第一次 interactive 触发 第二次 complete 触发。

domInteractive

返回 document.readiness 状态被置为 interactive 的时刻。

domComplete

返回 document readyState 状态被设置为 complete 的时间。

domContentLoadedEventStart

返回触发 DOMContentLoaded 即将触发的时刻,此时页面中所有的 script 标签已经被执行。

domContentLoadedEventEnd

返回 DOMContentLoaded 事件处理完成的时间。

loadEventStart

返回 load 事件触发的时刻。

loadEventEnd

返回 load 事件完成的时间。

performance.timing 主要时间计算

image.png
  1. DNS查询耗时
    domainLookupEnd - domainLookupStart
  2. js css 资源 加载时间:
    domInteractive - domComplete
  3. js css 资源 解析时间:
    domContentLoadedEventStart - domComplete
  4. domReady
    domContentLoadedEventEnd - navigationStart

performance.navigation

type
含义
0 链接跳入
1 刷新打开
2 后退
255 其他
redirectCount

从上一次非重定向开始到当前页面的重定向次数。

参考:

w3c 标准

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,464评论 1 11
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,393评论 0 4
  • 平时看到新鲜的事物总会忍不去尝试下,倒不是因为上来就有很大的兴趣,往往是想看看事物背后的动机。分析的过程能强化你的...
    lei__阅读 356评论 2 7
  • 第五章 一朝入双局 金粉调青绿,瓷青纸扇,细笔山水。大骨湘妃竹嵌螺钿,小骨烫花。...
    崖木古阅读 347评论 3 3