JS获取一个网页的打开速度

本文以谷歌浏览器获取网页速度为例，IE，火狐等浏览器器的操作命令与谷歌与所不同
首先按F12 进入网页的调试模式；然后如图：

在console中输入window.performance.timing.输入后会出现以下几个信息：

 .navigationStart 准备加载页面的起始时间
  .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间
 .unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间
  .redirectStart   如果有重定向,这里是重定向开始的时间.
  .redirectEnd     如果有重定向,这里是重定向结束的时间.
  .fetchStart        开始检查缓存或开始获取资源的时间
  .domainLookupStart   开始进行dns查询的时间
  .domainLookupEnd     dns查询结束的时间
  .connectStart                  开始建立连接请求资源的时间
  .connectEnd                     建立连接成功的时间.
  .secureConnectionStart      如果是https请求.返回ssl握手的时间
  .requestStart                     开始请求文档时间(包括从服务器,本地缓存请求)
  .responseStart                   接收到第一个字节的时间
  .responseEnd                      接收到最后一个字节的时间.
  .domLoading                       ‘current document readiness’ 设置为 loading的时间 (这个时候还木有开始解析文档)
 .domInteractive               文档解析结束的时间
  .domContentLoadedEventStart    DOMContentLoaded事件开始的时间
  .domContentLoadedEventEnd      DOMContentLoaded事件结束的时间
 .domComplete        current document readiness被设置 complete的时间
  .loadEventStart      触发onload事件的时间
  .loadEventEnd       onload事件结束的时间

其中有几个比较重要的性能分析指标名称比如：firstPaint(白屏时间)
白屏时间 = domloadng - fetchStart
DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart
一般一个网站都会存在图片，本篇文章的网页打开速度则会以首屏图片的加载时间作为判断的依据。
'首屏图片加载完成 : ',window.lastImgLoadTime - window.performance.timing.navigationStart; （在最后一张图出来的时候打时间点）

二.

通过JS脚本将数据传输到后台进行分析，

<script>
sniffer.report_url = 'http://127.0.0.1:9000/loadtime_data/  ;#监测结果汇报地址
sniffer.bandwith_test_img = 'http://www.baidu.com'; #如果要测试用户带宽，指定下载测试图片
sniffer.site_id = 1; #这是在服务器端帮这个站点分配的站点id
sniffer.bandwith_test_img_size = 2500; #写清楚你要测试下载的图片大小，不测试带宽的话不需要
sniffer.collect(sniffer); #开始收集数据并向服务器端汇报
</script>

https://github.com/triaquae/TengLan

下一篇继续更新讲解Django后端画出不同时间断内网页的打开时间波动图