性能信息收集(分析、代码、DEMO三合一)

知识储备

  1. 浏览器加载:浏览器~加载,解析,渲染
  2. 获取各种时间:Performance API

DEMO 页面

http://www.jianwangsan.cn/job/#/performance

github代码

performance-timing

浏览器加载过程

这里指网页,而不是任何资源。

时间线参考下图:

这里写图片描述

  1. 【redirect】:什么时候会触发重定向呢?很简单,http://example.com/ 就写成 http://example.com(缺少斜杠)就会触发重定向;
  2. 【App cache】:该阶段缓存检查(参照下面表格说明),简单来说,浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前。注意:domainLookupStart - fetchStart 这段时间,包括检查缓存的时间,但还包括【App cache】阶段和【DNS】阶段之间的空隙时间;
  3. 【DNS】:用户访问 url,DNS服务器根据域名找IP,然后去向目标服务器发起http请求,并被响应的时间:(domainLookupStart - domainLookupEnd
  4. 【TCP】:该阶段是和服务器建立链接的时间,connectEnd - connectStart(该阶段和【DNS】阶段的结尾中间有空隙);
  5. 【Request】:该阶段指发起请求,到接收到返回信息的第一个字节的消耗时间,performance.timing.responseStart - performance.timing.requestStart(该阶段和【TCP】结束的阶段有空隙);
  6. 【Response】:该阶段指从接收到返回信息的第一个字节,到接收完毕的时间,performance.timing.responseEnd - performance.timing.responseStart
  7. 【Processing】:该阶段的三个状态(状态改变会触发 document.onreadystatechange 这个回调函数,参照这一篇问答

    7.1. loading 指 document 仍在加载;

    7.2. interactive 指文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载(jQuery 的 $.ready());

    7.3. complete 指文档和所有子资源已完成加载。状态表示 load 事件即将被触发(window.onload)

  8. 【onload】:这个阶段两个状态:

    8.1. 在执行 window.onload 这个函数时,performance.timing.loadEventStart 已经存在,但是 performance.timing.loadEventEnd 还是 0;
    8.2. 执行完 window.onloadperformance.timing.loadEventEnd 就有值了

几个解释:

  1. performance.timing.responseEnd - performance.timing.requestStart: 这个指 html 文件从发起请求,到加载完毕需要的时间,而不是指所有资源加载完的时间;
  2. navigationStart: 这是一切的开始;

一些关键信息

API

api: performance.timing

属性含义
navigationStart准备加载新页面的起始时间
redirectStart如果发生了HTTP重定向,并且从导航开始,中间的每次重定向,都和当前文档同域的话,就返回开始重定向的timing.fetchStart的值。其他情况,则返回0
redirectEnd如果发生了HTTP重定向,并且从导航开始,中间的每次重定向,都和当前文档同域的话,就返回最后一次重定向,接收到最后一个字节数据后的那个时间.其他情况则返回0
fetchStart如果一个新的资源获取被发起,则 fetchStart必须返回用户代理开始检查其相关缓存的那个时间,其他情况则返回开始获取该资源的时间
domainLookupStart返回用户代理对当前文档所属域进行DNS查询开始的时间。如果此请求没有DNS查询过程,如长连接,资源cache,甚至是本地资源等。 那么就返回 fetchStart的值
domainLookupEnd返回用户代理对结束对当前文档所属域进行DNS查询的时间。如果此请求没有DNS查询过程,如长连接,资源cache,甚至是本地资源等。那么就返回 fetchStart的值
connectStart返回用户代理向服务器服务器请求文档,开始建立连接的那个时间,如果此连接是一个长连接,又或者直接从缓存中获取资源(即没有与服务器建立连接)。则返回domainLookupEnd的值
(secureConnectionStart)可选特性。用户代理如果没有对应的东东,就要把这个设置为undefined。如果有这个东东,并且是HTTPS协议,那么就要返回开始SSL握手的那个时间。 如果不是HTTPS, 那么就返回0
connectEnd返回用户代理向服务器服务器请求文档,建立连接成功后的那个时间,如果此连接是一个长连接,又或者直接从缓存中获取资源(即没有与服务器建立连接)。则返回domainLookupEnd的值
requestStart返回从服务器、缓存、本地资源等,开始请求文档的时间
responseStart返回用户代理从服务器、缓存、本地资源中,接收到第一个字节数据的时间
responseEnd返回用户代理接收到最后一个字符的时间,和当前连接被关闭的时间中,更早的那个。同样,文档可能来自服务器、缓存、或本地资源
domLoading返回用户代理把其文档的 “current document readiness” 设置为 “loading”的时候
domInteractive返回用户代理把其文档的 “current document readiness” 设置为 “interactive”的时候.
domContentLoadedEventStart返回文档发生 DOMContentLoaded事件的时间
domContentLoadedEventEnd文档的DOMContentLoaded 事件的结束时间
domComplete返回用户代理把其文档的 “current document readiness” 设置为 “complete”的时候
loadEventStart文档触发load事件的时间。如果load事件没有触发,那么该接口就返回0
loadEventEnd文档触发load事件结束后的时间。如果load事件没有触发,那么该接口就返回0
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值