zoukankan      html  css  js  c++  java
  • HTML5的学习--performance获取加载时间的工具

    前段时间因为项目需要获取页面加载的时间,就去看了下HTML5中的performane。

    可以用其获得页面详细的加载时间。

    关于performance的详细内容可以查看 http://www.cnblogs.com/CraryPrimitiveMan/p/3795086.html

    之后用performane写了一个小工具,用来获取页面详细的加载时间。

    GitHub上的地址是:https://github.com/CraryPrimitiveMan/performance-tool

    只在chrome中通过了测试。

    将times.js引入想应的HTML中,打开console(按F12),刷新一下页面就可以看到详细的加载时间。 也可以在JS中使用times()方法调用。

    其运行结果如下图

    源码及注释如下

    var times = function() {
        var timing = performance.timing;
        var loadTime = timing.loadEventEnd - timing.navigationStart;//过早获取时,loadEventEnd有时会是0
        if(loadTime <= 0) {
        // 未加载完,延迟200ms后继续times方法,直到成功
            setTimeout(function(){
                times();
            }, 200);
            return;
        }
        var readyStart = timing.fetchStart - timing.navigationStart;
        var redirectTime = timing.redirectEnd  - timing.redirectStart;
        var appcacheTime = timing.domainLookupStart  - timing.fetchStart;
        var unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
        var lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
        var connectTime = timing.connectEnd - timing.connectStart;
        var requestTime = timing.responseEnd - timing.requestStart;
        var initDomTreeTime = timing.domInteractive - timing.responseEnd;
        var domReadyTime = timing.domComplete - timing.domInteractive; //过早获取时,domComplete有时会是0
        var loadEventTime = timing.loadEventEnd - timing.loadEventStart;
    
        // 为console.table方法准备对象,包含耗时的描述和消耗的时间
        var allTimes = [
            { "描述": "准备新页面时间耗时", "时间(ms)": readyStart },
            { "描述": "redirect 重定向耗时", "时间(ms)": redirectTime },
            { "描述": "Appcache 耗时", "时间(ms)": appcacheTime },
            { "描述": "unload 前文档耗时", "时间(ms)": unloadEventTime },
            { "描述": "DNS 查询耗时", "时间(ms)": lookupDomainTime },
            { "描述": "TCP连接耗时", "时间(ms)": connectTime },
            { "描述": "request请求耗时", "时间(ms)": requestTime },
            { "描述": "请求完毕至DOM加载", "时间(ms)": initDomTreeTime },
            { "描述": "解释dom树耗时", "时间(ms)": domReadyTime },
            { "描述": "load事件耗时", "时间(ms)": loadEventTime },
            { "描述": "从开始至load总耗时", "时间(ms)": loadTime }
        ];
        console.table(allTimes);
    }
    window.onload = times;// onload时,触发times方法
  • 相关阅读:
    系统安全
    导出csv文件示例
    MsChart在MVC下的问题
    记录一些测试的结果
    使用CTE减少统计子查询
    otl获得sql出错位置(oracle)
    在sql语句中使用plsql变量
    Java经典编程题50道之二十四
    Java经典编程题50道之二十三
    Java经典编程题50道之二十二
  • 原文地址:https://www.cnblogs.com/CraryPrimitiveMan/p/3817527.html
Copyright © 2011-2022 走看看