使用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 玩法很多。

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>