前端的一些性能测试代码

最新推荐文章于 2024-06-14 14:14:00 发布

zhangludcsdn

最新推荐文章于 2024-06-14 14:14:00 发布

阅读量1.8k

点赞数

分类专栏：前端优化

本文链接：https://blog.csdn.net/zhangludcsdn/article/details/82703098

版权

前端优化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 整个页面加载过程时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function performanceTest() {
            console.info("开始")
            let timing = performance.timing,
            readyStart = timing.fetchStart - timing.navigationStart,
            redirectTime = timing.redirectEnd - timing.redirectStart,
            appcacheTime = timing.domainLookupStart - timing.fetchStart,
            unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart,
            lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart,
            connectTime = timing.connectEnd - timing.connectStart,
            requestTime = timing.responseEnd - timing.requestStart,
            initDomTreeTime = timing.domInteractive - timing.responseEnd,
            domReadyTime = timing.domComplete - timing.domInteractive,
            loadEventTime = timing.loadEventEnd - timing.loadEventStart,
            loadTime = timing.loadEventEnd - timing.navigationStart;
            console.log('准备新页面时间耗时: ' + readyStart);
            console.log('redirect 重定向耗时: ' + redirectTime);
            console.log('Appcache 耗时: ' + appcacheTime);
            console.log('unload 前文档耗时: ' + unloadEventTime);
            console.log('DNS 查询耗时: ' + lookupDomainTime);
            console.log('TCP连接耗时: ' + connectTime);
            console.log('request请求耗时: ' + requestTime);
            console.log('请求完毕至DOM加载: ' + initDomTreeTime);
            console.log('解析DOM树耗时: ' + domReadyTime);
            console.log('load事件耗时: ' + loadEventTime);
            console.log('加载时间耗时: ' + loadTime);
        }
    </script>
</head>
<body onload="performanceTest()">

</body>
</html>

2.js代码段执行时间

console.profile();
// TODOS，需要测试的页面逻辑动作
for (let i = 0; i < 100000; i++) {
    console.log(i * i);
}
console.profileEnd();

脚本：

let timeList = [];
function addTime(tag) {
    timeList.push({
        "tag": tag,
        "time": +new Date
    });
}
addTime("loading");
timeList.push({
    "tag": "load",
    "time": +new Date()
});
// TODOS，load加载时的操作
timeList.push({
    "tag": "load",
    "time": +new Date()
});
timeList.push({
    "tag": "process",
    "time": +new Date()
});
// TODOS，process处理时的操作
timeList.push({
    "tag": "process",
    "time": +new Date()
});
parseTime(timeList); // 输出{load: 时间毫秒数，process: 时间毫秒数}
function parseTime(time) {
    let timeStep = {},
    endTime;
    for (let i = 0, len = time.length; i < len; i++) {
        if (!time[i]) continue;
        endTime = {};
        for (let j = i + 1; j < len; j++) {
            if (time[j] && time[i].tag == time[j].tag) {
                endTime.tag = time[j].tag;
                endTime.time = time[j].time;
                time[j] = null;
            }
        }
        if (endTime.time >= 0 && endTime.tag) {
            timeStep[endTime.tag] = endTime.time - time[i].time;
        }
    }
    return timeStep;
}

zhangludcsdn

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端的一些性能测试代码

1 整个页面加载过程时间&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript
复制链接

扫一扫

专栏目录