页面加载时间记录

在分析前端页面的加载时间,常用的工具就是浏览器自带的分析工具,如Chrome的开发者工具等,但这种方法只限于人工单次分析,无法大批量的采集数据。

传统的js脚本,必须在页面的各种事件进行埋点,与正常的业务功能可能会有较差,且取不到页面加载的过程信息。

Html5的Web Preformance API带来了全新的方法,包含的Navigation Timing API可以解决大部分的页面性能分析需求,对于IE浏览器需IE9及之后上版本才支持。

下图是页面加载周期中的各类事件触发顺序,可以选择自己感兴趣的时间点进行记录和分析。

下面是一个示例的使用方法,注意使用了定时器来获取数据,否则会取不到loadEventEnd的时间。

(function() {
    if (!window.performance) return;
    var timer = setInterval(function() {
        var page = performance.timing;
        if (page.loadEventEnd > 0) {
            clearInterval(timer);
            var timeModel = {};
            timeModel.prepareTime = page.connectEnd - page.fetchStart;
            timeModel.responseTime = page.responseStart - page.requestStart;
            timeModel.pageDownloadTime = page.responseEnd - page.responseStart;
            timeModel.resourceDonwloadTime = page.domContentLoadedEventEnd - page.domLoading;
            timeModel.domRenderTime = page.domComplete  - page.domContentLoadedEventEnd;
            timeModel.loadTime = page.loadEventEnd - page.loadEventStart;
            timeModel.totalTime = page.loadEventEnd - page.fetchStart;

            $.post('timing.jsp', timeModel);
        }
    }, 3000);
})();

参考资料:
Navigation Timing

Comments are closed.