前端性能监控window.performance的巧妙写法

Posted 2020-12-15 jlfw

performance常规用法

相信很多人都在使用window.performance来监控页面的性能。都会在页面onload后，去获取window.performance.timing

但如果真正分析过数据的人，都会发现window.performance.timing.loadEventEnd有些时候在onload时间触发后
还是为0

这时候可能有些人会延迟再重新获取一次

这里带来另外一种思路实现

performance万无一失的用法

(function(){
    if (window.performance || window.webkitPerformance) {
        var perf = window.performance || window.webkitPerformance;
        var timing = perf.timing;
        var navi = perf.navigation;
        var timer = setInterval(function() {
            if (0 !== timing.loadEventEnd) {
                clearInterval(timer);
                var data = {
                    url: window.location.href,
                    ua: window.navigator.userAgent,
                    dns :timing.domainLookupEnd - timing.domainLookupStart,
                    tcp :timing.connectEnd - timing.connectStart,
                    request : timing.responseEnd -timing.responseStart,
                    blank : timing.domLoading - timing.fetchStart,
                    domready : timing.domContentLoadedEventEnd - timing.fetchStart,
                    onload : timing.loadEventEnd - timing.fetchStart,
                    firstimagetime : 0,
                    isdirty : 0
                };

用了一个定时器去判断timing.loadEventEnd不等于0的时候才去上报。

这样的写法有两个好处
1 不必局限于onload方法了，可以在任何时候执行
2 保证loadEventEnd不为0，避免脏数据

好处多多...是不是要改进下上报的写法呢。