浏览器性能接口performance.timing说明

原文来自于

https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

下图描述了该接口的各个时间点:

performance.timing API 各个时间点含义如下:

navigationStart

当访问一个新页面时,当前页面卸载完成所返回的时间点,如果没有当前页面,则返回fetchStart时间点。

unloadEventEnd

如果要打开的页面和当前的页面同源,则返回用户unload事件执行完成后的时间点,如果当前文档不存在或者不同源,则返回0

redirectStart

如果是HTTP重定向,如果跳转都是同源的,则返回开始获取发起重定向的时间点,否则返回0

redirectEnd

如果是同源重定向,返回重定向请求接收完最后一字节的时间点,否则返回0

fetchStart

如果请求是用http get发起的,返回浏览器查缓存之前的时间点,否则返回发起获取资源的时间点

domainLookupStart

返回浏览器发起DNS查询的时间点,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点

domainLookupEnd

返回结束DNS查询的时间点,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点

connectStart

返回浏览器向服务器发起建立获取当前文档的连接请求的时间点,

如果是长连接或者请求文件来自缓存等本地存储则返回domainLookupEnd时间点

connectEnd

返回与服务器建立完成连接的时间点,

如果是长连接或者请求文件来自缓存等本地存储则返回domainLookupEnd时间点

requestStart

返回浏览器发起请求的时间,不管是向server还是本地缓存或存储
responseStart

返回浏览器拿到第一个响应字节的时间点,包括从服务器、缓存或者其他本地存储

responseEnd

返回浏览器拿到最后一个响应字节或者传输连接关闭的时间点,包括从服务器、缓存或者其他本地存储

domLoading

返回浏览器将当前文档状态设置成loading的时间点

domInteractive

返回浏览器将当前文档状态设置成interactive的时间点

domContentLoadedEventStart

返回浏览器触发DOMContentLoaded事件执行之前的时间点

domContentLoadedEventEnd

返回浏览器触发DOMContentLoaded事件执行完成的时间点

domComplete

返回浏览器将当前文档状态设置成complete的时间点

loadEventStart

返回浏览器触发load事件执行之前的时间点,否则为0

loadEventEnd

返回浏览器触发load事件执行完成的时间点

浏览器性能接口performance.timing说明

时间: 2024-11-03 21:18:20

浏览器性能接口performance.timing说明的相关文章

利用window.performance.timing进行性能分析

性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // .unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间 // .redirectStart 如果有重定向,这里是重定向开始的时间. // .redirectEnd 如果有重定向,这里是重定

Nodejs中分析web前端性能(window.performance)

在nodejs中,通过puppeteer来获取web页面中的window.performance对象,从而分析页面的性能.下面直接上代码. const puppeteer = require('puppeteer'); const path = require("path"); const logger=require("./log"); const log = logger.getPuppeteerRecordLogger() ; /* 启动浏览器 */ asyn

微信内置浏览器私有接口WeixinJSBridge介绍

原文地址:http://www.3lian.com/edu/2015/05-25/216227.html 这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友.分享函数.隐藏工具栏.隐藏三个点按钮等功能,需要的朋友可以参考下 微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了. 注意:(WeixinJSBridge只能在微信内打开的网页有效) 按钮一之------发送给好

浏览器版本检测接口封装

最近在做公司PC端低版本浏览器兼容性问题,现将检测浏览器版本号接口封装一下,和大家一起分享交流下.  browserCheck.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器版本检测接口封装</title> <script src="browserCheck.js&quo

微信内置浏览器私有接口WinXinJsBridge介绍

关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一下自己短缺的js知识,虽然只是了解了一点,但是还是先记录下来,一方面增强自己的记忆,另一方面,顺便练练手,不至于将来使用的时候,找到了地方.下面进入正题. 看了这个微信浏览器私有接口WeiXinJsBridge,大致总结了一下几个小的有用的知识点: 1.分享给好友. 2.分享到朋友圈. 3.分享到微

3种浏览器性能測试

1.Javascript性能測试(Google的V8 Javascript引擎) 測试地址:http://v8.googlecode.com/svn/data/benchmarks/v6/run.html 谷歌浏览器版本号32 IE浏览器版本号11 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamt4cWo=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthE

关于浏览器性能优化-转

网页性能管理详解 作者: 阮一峰 日期: 2015年9月17日 你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢? 本文将详细介绍性能问题的出现原因,以及解决方法. 一.网页生成的过程 要理解网页性能为什么不好,就要了解网页是怎么生成的. 网页的生成过程,大致可以分成五步. HTML代码转化成DO

chrome浏览器Network面板请求Timing分析

Timing显示资源在整个请求生命周期过程中各部分话费的时间. Queueing 排队的时间花费.肯能由于该请求被渲染引擎认为是优先级比较低的资源(图片).服务器不可用.超过浏览器并发请求的最大连接数(Chrome的最大并发连接数是6) Stalled(阻塞) 浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接:此外脚本也会阻塞其他组件的下载: 优化措施: 1.将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增

关于浏览器性能

1.浏览器的渲染机制,渲染展示网页有以下几步: 1.1解析html(HTML Parser) 1.2创建DOM树(DOM Tree) 1.3渲染树构建(Render Tree) 1.4绘制渲染树(Painting) 具体结构流程图为: 2.怎样避免呢? 2.1慎重选择高消耗的样式:如box-shadow.border-radius.transform.css filters等. 2.2减少重排能够节省浏览器对其子元素及父类元素的重新渲染,减少回流reflow: (由于reflow是一种浏览器中的