您的位置: 首页  >  文章  >  性能信息收集（分析、代码、DEMO三合一）

性能信息收集（分析、代码、DEMO三合一）

分类: 文章 • 2024-08-20 17:01:58

知识储备

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

DEMO 页面

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

github代码

performance-timing

浏览器加载过程

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

时间线参考下图：

性能信息收集（分析、代码、DEMO三合一）

  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.onload ，performance.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

相关推荐