Django+JS 制作网页监控测试平台

首先以谷歌浏览器为例子，IE，火狐，等浏览器的查看代码略有不同，本文章都以谷歌浏览器作为说明。
在这里插入图片描述
如上图，在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事件结束的时间

其中包含几个很重要的性能指标：

 白屏时间 = domloadng - fetchStart
TCP链接耗时 = connectEnd - connectStart
 request请求耗时 = responseEnd - responseStart
 解析dom树耗时 = domComplete - domInteractive
 DNS查询耗时 = domainLookupEnd - domainLookupStart
domready时间 = domContentLoadedEventEnd - fetchStart
 onload时间 = loadEventEnd - fetchStart

当前测试网页打开速度则以首页图片加载完整后作为衡量的标准！
'首屏图片加载完成 : ',window.lastImgLoadTime - window.performance.timing.navigationStart); //在最后一张图出来的时候打时间点
。
最开始通过原生的ajax传输这个数据到后台失败，发现是因为无法进行跨域请求。最后通过jsonp get 请求将我们需要的数据发送到后端
需要监控的需要在script 中加入如下这句话（出自w3cheool）:

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

后面将继续讲解如何通过jsonp,发送数据到后端。后端根据时间画出对应的时间波动图

Django+JS 制作网页监控测试平台

猜你喜欢