前端质量分析

先上大王博客https://www.cnblogs.com/alex3714/articles/5714238.html，说的很有道理，我都快信了，所以一直想把这个项目写出来，怎奈大王一直不讲，唉，实在没办法只好自己写了。理念就是模仿大王的，实际操作流程有些不一样：

1. 还是从前端js获取一些相关的前端性能指标
2. 讲这些性能指标统一发送给我提供的接口
3. 这个接口会对发送过来的数据进行一些处理
4. 将处理的数据扔进kafka队列
5. 从kafka队列里取出数据存进influxdb
6. 从influxdb取出数据进行展示

我的流程就是这样，其实都是很简单易懂的，但是这里面有一些小处理，大概有：

1. js我是百度了大佬的，他的js可以取出前端性能相关的指标，可是取出来的加载时间他喵的都是负值…..实在是心情复杂，还好最后改好了，这是最坑我的地方，因为我前端不好
2. 本来是想直接把数据存进influxdb，但是仔细想想还是应当先放入kafka，然后由需要的地方自己去取就是了，当然我现在只有向influxdb存，之后可以继续加，这样比较好拓展
3. 基于第二点，我需要一个接收数据并扔进kafka的api（这个很随意）以及一个（或多个）从kafka里取数据并存储到对应后端的进程，这个进程是一直监听kafka队列运行的

 

因为是放在业务前端里获取的数据，那么数据量肯定随着业务峰谷变化。再一个我原本想集成在我的django里，但是查了半天资料也没找到如何让django运行期间一直保持另外几个进程一直运行（本来是想用threading）。最后想想算了，直接用go写不就行了，性能好，开几个goroutine问题全都解决了，我只需要把前端展示集成下不就好了嘛。语言选好了，逻辑流程清晰了，那就开搞

 

从前端开始，我直接把改好的js贴进来，大家复制就是了，唯一需要更改的是第179行改成你的api地址（也就是go提供的接口）

(function(window) {
    'use strict';
    
    /**
     * https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance
     */
    var performance = window.performance || window.webkitPerformance || window.msPerformance || window.mozPerformance || {};
    performance.now = (function() {
        return performance.now    ||
        performance.webkitNow     ||
        performance.msNow         ||
        performance.oNow          ||
        performance.mozNow        ||
        function() { return new Date().getTime(); };
    })();
    
    /**
     * 默认属性
     */
    var defaults = {
        performance: performance, // performance对象
        ajaxs: [], //ajax监控
        //可自定义的参数
        param: {
            // rate: 0.5, //随机采样率
            // src: 'http://127.0.0.1:8000/thief/a', //请求发送数据
            // download: {img:'http://h5dev.eclicks.cn/libs/common/img/bandwidth-5.png', size:4511798}//网速设置
        }
    };
    
    if(window.primus.param) {
        for(var key in window.primus.param) {
            defaults.param[key] = window.primus.param[key];
        }
    }
    var primus = defaults;
    var firstScreenHeight = window.innerHeight;//第一屏高度
    var doc = window.document;
    
    /**
     * 异常监控
     * https://github.com/BetterJS/badjs-report
     * @param {String}  msg   错误信息
     * @param {String}  url      出错文件的URL
     * @param {Long}    line     出错代码的行号
     * @param {Long}    col   出错代码的列号
     * @param {Object}  error       错误信息Object https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
     */
    window.onerror = function(msg, url, line, col, error) {
        var newMsg = msg;
        if (error && error.stack) {
            var stack = error.stack.replace(/\n/gi, "").split(/\bat\b/).slice(0, 9).join("@").replace(/\?[^:]+/gi, "");
            var msg = error.toString();
            if (stack.indexOf(msg) < 0) {
                stack = msg + "@" + stack;
            }
            newMsg = stack;
        }
//        if (Object.prototype.toString.call(newMsg) === "[object Event]") {
//          newMsg += newMsg.type ? ("--" + newMsg.type + "--" + (newMsg.target ? (newMsg.target.tagName + "::" + newMsg.target.src) : "")) : "";
//      }
        
        var obj = {msg:newMsg, target:url, rowNum:line, colNum:col};
        alert(obj.msg);
    };
    
    /**
     * ajax监控
     * https://github.com/HubSpot/pace
     */
    var _XMLHttpRequest = window.XMLHttpRequest;// 保存原生的XMLHttpRequest
    // 覆盖XMLHttpRequest
    window.XMLHttpRequest = function(flags) {
        var req;
        // 调用原生的XMLHttpRequest
        req = new _XMLHttpRequest(flags);
        // 埋入我们的“间谍”
        monitorXHR(req);
        return req;
    };
    var monitorXHR = function(req) {
        req.ajax = {};
        //var _change = req.onreadystatechange;
        req.addEventListener('readystatechange', function() {
            if(this.readyState == 4) {
                req.ajax.end = primus.now();//埋点

                if ((req.status >= 200 && req.status < 300) || req.status == 304 ) {//请求成功
                    req.ajax.endBytes = _kb(req.responseText.length * 2);//KB
                    //console.log('响应数据：'+ req.ajax.endBytes);//响应数据大小
                }else {//请求失败
                    req.ajax.endBytes = 0;
                }
                req.ajax.interval = req.ajax.end - req.ajax.start;
                primus.ajaxs.push(req.ajax);
                //console.log('ajax响应时间：'+req.ajax.interval);
            }
        }, false);
        
        // “间谍”又对open方法埋入了间谍
        var _open = req.open;
        req.open = function(type, url, async) {
            req.ajax.type = type;//埋点
            req.ajax.url = url;//埋点
            return _open.apply(req, arguments);
        };
        
        var _send = req.send;
        req.send = function(data) {
            req.ajax.start = primus.now();//埋点
            var bytes = 0;//发送数据大小
            if(data) {
                req.ajax.startBytes = _kb(JSON.stringify(data).length * 2 );
            }
            return _send.apply(req, arguments);
        };
    };
    
    /**
     * 计算KB值
     * http://stackoverflow.com/questions/1248302/javascript-object-size
     */
    function _kb(bytes) {
        return (bytes / 1024).toFixed(2);//四舍五入2位小数
    }
    
    /**
     * 给所有在首屏的图片绑定load事件，计算载入时间
     * TODO 忽略了异步加载
     * CSS背景图 是显示的在param参数中设置backgroundImages图片路径数组加载
     */
    var imgLoadTime = 0;
    function _setCurrent() {
        var current = Date.now();
        current > imgLoadTime && (imgLoadTime = current);
    }
    doc.addEventListener('DOMContentLoaded', function() {
        var imgs = doc.querySelectorAll('img');
        imgs = [].slice.call(doc.querySelectorAll('img'));
        if(imgs) {
            imgs.forEach(function(img) {
                if(img.getBoundingClientRect().top > firstScreenHeight) {
                    return;
                }
    //            var image = new Image();
    //          image.src = img.getAttribute('src');
                if(img.complete) {
                    _setCurrent();
                }
                //绑定载入时间
                img.addEventListener('load', function() {
                    _setCurrent();
                }, false);
            });
        }
        
        //在CSS中设置了BackgroundImage背景
        if(primus.param.backgroundImages) {
            primus.param.backgroundImages.forEach(function(url) {
                var image = new Image();
                image.src = url;
                if(image.complete) {
                    _setCurrent();
                }
                image.onload = function() {
                    _setCurrent();
                };
            });
        }
    }, false);

    window.addEventListener('load', function() {
        //测试网速
        //_measureConnectionSpeed();
        setTimeout(function() {
            var time = primus.getTimes();

            $.ajax({
                url: 'http://192.168.56.1:8080/',
                type: 'POST',
                dataType: 'json',
                data: time,
                success: function (data) {

                }
            });

            //通过网页大小测试网速
//            var duration = time.domReadyTime / 1000;
//            var pageSize = doc.documentElement.innerHTML.length * 2 * 8;
//            var speedBps = pageSize / duration;
//            console.log(speedBps/(1024*1024));

            var data = {ajaxs:primus.ajaxs, dpi:primus.dpi(), time:time};
            primus.send(data);
        }, 500);
    });

    /**
     * 打印特性 key:value格式
     */
    primus.print = function(obj, left, right, filter) {
        var list = [], left = left || '', right = right || '';
        for(var key in obj) {
            if(filter) {
                if(filter(obj[key]))
                    list.push(left + key + ':' + obj[key] + right);
            }else {
                list.push(left + key + ':' + obj[key] + right);
            }
        }
        return list;
    };
    
    /**
     * 请求时间统计
     * 需在window.onload中调用
     * https://github.com/addyosmani/timing.js
     */
    primus.getTimes = function() {
        var timing = performance.timing;
        if (timing === undefined) {
            return false;
        }
        var api = {};
        //存在timing对象
        if (timing) {
            // All times are relative times to the start time within the
            // 白屏时间，也就是开始解析DOM耗时
            var firstPaint = 0;

            // Chrome
            if (window.chrome && window.chrome.loadTimes) {
                // Convert to ms
                firstPaint = window.chrome.loadTimes().firstPaintTime * 1000;
                api.firstPaintTime = firstPaint;
            }
            // IE
            else if (typeof timing.msFirstPaint === 'number') {
                firstPaint = timing.msFirstPaint;
                api.firstPaintTime = firstPaint;
            }
            else {
                api.firstPaintTime = timing.navigationStart;
            }
            // Firefox
            // This will use the first times after MozAfterPaint fires
            //else if (window.performance.timing.navigationStart && typeof InstallTrigger !== 'undefined') {
            //    api.firstPaint = window.performance.timing.navigationStart;
            //    api.firstPaintTime = mozFirstPaintTime - window.performance.timing.navigationStart;
            //}

            /**
             * http://javascript.ruanyifeng.com/bom/performance.html
             * 加载总时间
             * 这几乎代表了用户等待页面可用的时间
             * loadEventEnd（加载结束）-navigationStart（导航开始）
             */
            api.loadTime = timing.loadEventEnd - timing.navigationStart;

            /**
             * Unload事件耗时
             */
            api.unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;

            /**
             * 执行 onload 回调函数的时间
             * 是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？
             */
            api.loadEventTime = timing.loadEventEnd - timing.loadEventStart;

            /**
             * 用户可操作时间
             */
            api.domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;

            /**
             * 首屏时间
             * 用户在没有滚动时候看到的内容渲染完成并且可以交互的时间
             * 记录载入时间最长的图片
             */
            if(imgLoadTime == 0) {
                api.firstScreen = api.domReadyTime;
            }else {
                api.firstScreen = imgLoadTime - timing.navigationStart;
            }

            /**
             * 解析 DOM 树结构的时间
             * 期间要加载内嵌资源
             * 反省下你的 DOM 树嵌套是不是太多了
             */
            api.parseDomTime = timing.domComplete - timing.domInteractive;

            /**
             * 请求完毕至DOM加载耗时
             */
            api.initDomTreeTime = timing.domInteractive - timing.responseEnd;

            /**
             * 准备新页面时间耗时
             */
            api.readyStart = timing.fetchStart - timing.navigationStart;

            /**
             * 重定向的时间
             * 拒绝重定向！比如，http://example.com/ 就不该写成 http://example.com
             */
            api.redirectTime = timing.redirectEnd - timing.redirectStart;

            /**
             * DNS缓存耗时
             */
            api.appcacheTime = timing.domainLookupStart - timing.fetchStart;

            /**
             * DNS查询耗时
             * DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？
             * 可使用 HTML5 Prefetch 预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)
             */
            api.lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;

            /**
             * TCP连接耗时
             */
            api.connectTime = timing.connectEnd - timing.connectStart;

            /**
             * 内容加载完成的时间
             * 页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？
             */
            api.requestTime = timing.responseEnd - timing.requestStart;

            /**
             * 请求文档
             * 开始请求文档到开始接收文档
             */
            api.requestDocumentTime = timing.responseStart - timing.requestStart;

            /**
             * 接收文档
             * 开始接收文档到文档接收完成
             */
            api.responseDocumentTime = timing.responseEnd - timing.responseStart;

            /**
             * 读取页面第一个字节的时间
             * 这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？
             * TTFB 即 Time To First Byte 的意思
             * 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte
             */
            api.TTFB = timing.responseStart - timing.navigationStart;
        }
        return api;
    };
    
    /**
     * 与performance中的不同，仅仅是做时间间隔记录
     * https://github.com/nicjansma/usertiming.js
     */
    var marks = {};
    primus.mark = function(markName) {
        var now = performance.now();
        marks[markName] = {
            startTime: Date.now(),
            start: now,
            duration: 0
        };
    };
    
    /**
     * 计算两个时间段之间的时间间隔
     */
    primus.measure = function(startName, endName) {
        var start = 0, end = 0;
        if(startName in marks) {
            start = marks[startName].start;
        }
        if(endName in marks) {
            end = marks[endName].start;
        }
        return {
            startTime: Date.now(),
            start: start,
            end: end,
            duration: (end - start)
        };
    };
    
    /**
     * 资源请求列表
     * Safrai以及很多移动浏览器不支持
     * https://github.com/nurun/performance-bookmarklet
     * http://nicj.net/resourcetiming-in-practice/
     */
    primus.getEntries = function() {
        if (performance.getEntries === undefined) {
            return false;
        }
        
        var entries = performance.getEntriesByType('resource');
        var statis = [];
        entries.forEach(function(t, index) {
            var isRequest = t.name.indexOf("http") === 0;console.log(t.name)
//            if (isRequest) {
//                urlFragments = t.name.match(/:\/\/(.[^/]+)([^?]*)\??(.*)/);
//                
//                maybeFileName = t.name.split("/").pop();
//                fileExtension = maybeFileName.substr((Math.max(0, maybeFileName.lastIndexOf(".")) || Infinity) + 1);
//            } else {
//                urlFragments = ["", window.location.host];
//                fileExtension = t.name.split(":")[0];
//            }
            var cur = {
                name: t.name,
                fileName: t.name.split("/").pop(),
                //initiatorType: t.initiatorType || fileExtension || "SourceMap or Not Defined",
                duration: t.duration
                //isRequestToHost: urlFragments[1] === location.host
            };

            if (t.requestStart) {
                cur.requestStartDelay = t.requestStart - t.startTime;
                // DNS 查询时间
                cur.lookupDomainTime = t.domainLookupEnd - t.domainLookupStart;
                // TCP 建立连接完成握手的时间
                cur.connectTime = t.connectEnd - t.connectStart;
                // TTFB
                cur.TTFB = t.responseStart - t.startTime;
                // 内容加载完成的时间
                cur.requestTime = t.responseEnd - t.requestStart;
                // 请求区间
                cur.requestDuration = t.responseStart - t.requestStart;
                // 重定向的时间
                cur.redirectTime = t.redirectEnd - t.redirectStart;
            }
            
            if (t.secureConnectionStart) {
                cur.ssl = t.connectEnd - t.secureConnectionStart;
            }
            
            statis.push(cur);
        });
        return statis;
    };
    
    /**
     * 标记时间
     * Date.now() 会受系统程序执行阻塞的影响不同
     * performance.now() 的时间是以恒定速率递增的，不受系统时间的影响（系统时间可被人为或软件调整）
     */
    primus.now = function() {
        return performance.now();
    };
    
    /**
     * 网络状态
     * https://github.com/daniellmb/downlinkMax
     * http://stackoverflow.com/questions/5529718/how-to-detect-internet-speed-in-javascript
     */
    primus.network = function() {
        //2.2--4.3安卓机才可使用
        var connection = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection;
        var types = "Unknown Ethernet WIFI 2G 3G 4G".split(" ");
        var network = {bandwidth:null, type:null}
        if(connection && connection.type) {
            network.type = types[connection.type];
        }
        
        return network;
    };
    
    /**
     * 测试网速
     */
    function _measureConnectionSpeed() {
        var startTime, endTime;
        var download = new Image();
        download.onload = function () {
            endTime = primus.now();
            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;
            var speedBps = (bitsLoaded / duration).toFixed(2);
            var speedKbps = (speedBps / 1024).toFixed(2);
            var speedMbps = (speedKbps / 1024).toFixed(2);
            console.log(speedMbps);
        }
        startTime = primus.now();
        var cacheBuster = "?rand=" + startTime;
        download.src = imageAddr + cacheBuster;
    }
    
    /**
     * 代理信息
     */
    primus.ua = function() {
        return USERAGENT.analyze(navigator.userAgent);
//        var parser = new UAParser();
//        return parser.getResult();
    };
    
    /**
     * 分辨率
     */
    primus.dpi = function() {
        return {width:window.screen.width, height:window.screen.height};
    };
    
    /**
     * 组装变量
     * https://github.com/appsignal/appsignal-frontend-monitoring
     */
    function _paramify(obj) {
        return 'data=' + JSON.stringify(obj);
    }
    
    /**
     * 推送统计信息
     */
    primus.send = function(data) {
        var ts = new Date().getTime().toString();
        //采集率
        if(primus.param.rate > Math.random(0, 1)) {
            var img = new Image(0, 0);
            img.src = primus.param.src +"?" + _paramify(data) + "&ts=" + ts;
        }
    };
    
    var currentTime = Date.now(); //这个脚本执行完后的时间 计算白屏时间
    window.primus = primus;
})(this);

然后是你要检测的前端页面，直接把该js引用就ok了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="/statics/js/jquery-1.10.1.min.js" type="text/javascript"></script>

    <script type='text/javascript'>
        window.primus || (primus={});
    </script>
    <script src="/statics/js/primus.js"></script>
</head>
<body>

    <div>Index</div>

</body>
</html>

这样，每当有人访问该页面时，就会取出他此次访问页面相关质量然后post到我们的api上

然后是api进行处理，代码在git上：https://github.com/bfmq/Hermes

首先是前端质量的基本字段，然后再加上这个页面的url（因为你肯定不止检测一个页面嘛，之后前端展示的时候根据url进行不同的查询语句就可以了），最后根据访问ip调阿里的api获取了这个ip所属的地区，这样就可以知道地区进行一些判断了。在程序开始运行的时候就会打开一个一直从kafka队列取数据并录入influxdb的goroutine，你可以再加一些自己的插件进去，录入到大数据里一类的。当然conf下的配置你得改成你自己的服务器的。

 

后台内部处理完成了，就要在前端展示了，这个还是使用了python继承在django里了，前端出图用的还是echarts，数据就是从influxdb里取得（这里肯定又是python的api），数据还是那个数据，具体想用什么图展示就看你开心了，我就简单的直接全部展示了下，设置的是每一分钟会自动ajax再去取后刷新下xy轴（还是echarts里的功能）

当然了，现在展示的数据只是我测试页面的测试数据，所以都是几ms级别的，检测的页面几乎没写内容嘛毕竟，但是经过使用，还是ok的

最后再附上各名词对应关系跟我python获取数据的代码

"firstPaint"："白屏时间"

"loadTime"："加载总时间"

"unloadEventTime"："Unload事件耗时"

"loadEventTime"："onload"回调函数时间"

"domReadyTime"："用户可操作时间"

"firstScreen"："首屏时间"

"parseDomTime"："DOM树结构解析时间"

"initDomTreeTime"："请求完毕至DOM加载耗时"

"readyStart"："准备新页面时间耗时"

"redirectTime"："重定向的时间"

"appcacheTime"："DNS缓存耗时"

"lookupDomainTime"："DNS查询耗时"

"connectTime"："TCP连接耗时"

"requestTime"："内容加载完成的时间"

"requestDocumentTime"："请求文档时间"

"responseDocumentTime"："接收文档时间"

"TTFB"："读取页面第一个字节的时间"

def get_influxdb_data(url, city):
    """
    从hermes库里获取数据
    :param url:  索引，你要查看的url
    :param city:  表名，你要查看的城市
    :return: 
    """
    data = {}
    query = """select  TTFB,appcacheTime,connectTime,domReadyTime,firstScreen,initDomTreeTime,loadEventTime,
    loadTime,lookupDomainTime,parseDomTime,readyStart,redirectTime,requestDocumentTime,requestTime,responseDocumentTime,
    unloadEventTime from "{0}" where url = '{1}' and time > now() - 1h;""".format(city, url)
    influxdb_obj = InfluxDBCFactory('hermes')
    query_ret = influxdb_obj.query(query)
    all_data = query_ret.raw['series'][0]
    all_data_columns = all_data['columns']
    all_data_values = all_data['values']

    for key in all_data_columns:
        key_index = all_data_columns.index(key)
        if key != 'time':
            key_list = [x[key_index] for x in all_data_values]
        else:
            key_list = [utc2local(x[key_index], local_format='%H:%M:%S') for x in all_data_values]
        data[FrontendData[key]] = key_list
    return data

#!/usr/bin/env python
# -*- coding:utf8 -*-
# __author__ = '北方姆Q'

from influxdb import InfluxDBClient
from plugins.duia.singleton import Singleton
from django.conf import settings


class InfluxDBCFactory(InfluxDBClient, Singleton):
    def __init__(self, database, host=settings.INFLUXDB_SERVER, port=settings.INFLUXDB_PORT):
        super().__init__(host=host, port=port, database=database)

#!/usr/bin/env python
import time
import datetime

# 格式自改
UTC_FORMAT = '%Y-%m-%dT%H:%M:%SZ'
LOCAL_FORMAT = '%Y-%m-%d %H:%M:%S'


def utc2local(utc_str, utc_format=UTC_FORMAT, local_format=LOCAL_FORMAT):
    utc_st = datetime.datetime.strptime(utc_str, utc_format)
    local_time = datetime.datetime.fromtimestamp(time.time())
    utc_time = datetime.datetime.utcfromtimestamp(time.time())
    time_difference = local_time - utc_time
    local_st = utc_st + time_difference
    return local_st.strftime(local_format)