前端性能优化 —— 前端性能分析

function performanceTest() {
 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);
}

复制

performance.memory // 内存占用的具体数据
performance.now() // performance.now()方法返回当前网页自performance.timing到现在的时间，可以精确到微秒，用于更加精确的计数。但实际上，目前网页性能通过毫秒来计算就足够了。
performance.getEntries() // 获取页面所有加载资源的performance timing情况。浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等）发出一个HTTP请求。performance.getEntries方法以数组形式返回所有请求的时间统计信息。
performance.navigation // performance还可以提供用户行为信息，例如网络请求的类型和重定向次数等，一般都存放在performance.navigation对象里面。
performance.navigation.redirectCount // 记录当前网页重定向跳转的次数。

复制

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;
}

复制