使用nginx收集用户页面加载时间
使用nginx收集用户页面加载时间
-外星人- 发表于10个月前
使用nginx收集用户页面加载时间
  • 发表于 10个月前
  • 阅读 32
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 使用nginx收集用户页面加载时间

最近老是有用户说,页面打开慢,但是自己打开又很快,所以想统计一下用户打开网站的时间,当然这个统计有点粗糙,但是也能说明一点问题

实现原理很简单,就是在header里面保存一下用js保存一下当前时间,然后在body结束前面再加一段js,加载耗时(ms) = 用当前时间 - header里面的时间,就得到了这个页面加载大概需要的时间,主要是页面内容、CSS、js这些加载所花的时间,ajax这里不统计,知道原理之后就简单了

这是header里面加的

<script type="text/javascript">var loadTime = new Date().getTime()</script>

这是body结束标签前的,主要用来做数据上传

<script type="text/javascript">
    (function(){var time = new Date().getTime()-loadTime;var args = ['time=' + time,'url=' + location.href,'app=d2VpeGlu'];var img = new Image(1, 1);img.src = 'http://www.test.com/load.gif?' + args.join("&");})()
</script>	

通过加载图片的方式把数据上传到服务器,图片没有跨域问题,我这里主要只采集两个信息,一个是time,也就是时间,一个是当前页面的url,废话,没有url我怎么知道是哪个页面加载比较慢,还有一个参数是app,只要用来区分是那个网站,因为我部署了多个网站,所以加一个app标识,好过滤数据

服务端的nginx其实并没有一个叫做load.gif的图片,这个是我来搜集数据用的,代码就几行

location = /load.gif {
    access_log logs/stat.log main;
    default_type image/gif;
    content_by_lua_block{
        ngx.say("")
    }
}

其实这里什么都没做,直接返回了空内容,只是把日志写到了一个单独统计的log文件里面,好方便查看,有时间的话在lua里面处理一下,做个统计排序,做个数据可视化页面,就差不多了,最近用openresty做了两个网站,感觉还不错,nginx + lua 玩法很多。

共有 人打赏支持
粉丝 48
博文 45
码字总数 22101
×
-外星人-
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: