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

（点选

译者：ouven

https://my.oschina.net/zhangstephen/blog/1601380

后端操控性强化是两个很笼统的基本概念，两本书后面的部份也或多或少提先不意欲探求后端强化具体内容能甚么样去做，先看一看甚么是后端操控性，如果甚么样去介绍和赞扬后端网页的操控性。

：受控等候延迟天数和不受控等候延迟天数。受控等候延迟天数能认知为能透过管理手段和强化来改良延长的部份，比如增大图片大小让允诺读取更快、增加HTTP允诺如有。不受控等候延迟天数则是无法或极难透过其间端管理手段来改良优化的，比如滑鼠点选延迟天数、CPU排序天数延迟天数、ISP（Internet Service Provider，互联网服务供应商）互联网数据传输延迟天如有。因此要晓得的是，后端中的大部份强化都是特别针对受控等候延迟天数这部份来进

后端操控性试验

源读取排程图预测。

Performance Timing API是两个全力支持Internet Explorer 9以内版及WebKitMach应用程序中用作历史记录网页读取和导出操作过程中关键性天数点的监督机制，它能详尽历史记录每一网页天然资源从早已开始读取到导出顺利完成而此操作过程中具体内容实施出现的天数点，这种依照早已开始和完结天数戳就能排序出那个操作过程星毛的天数了。

图1为W3C国际标准中Performance Timing天然资源读取和导出操作过程历史记录各关键性点的左图，应用程序中读取和导出两个HTML文档的详尽操作过程相继历经unload、redirect、App Cache、DNS、TCP、Request、Response、Processing、onload两个期，每一操作过程早已开始和完结的关键性天数戳应用程序早已采用performance.timing来历史记录了，因此依照那个历史记录并紧密结合单纯的排序，他们就可以获得网页中每一操作过程所耗用的天数。

图1 performance API关键性天数点历史记录

functionperformanceTest(){

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()象（脚本文档、样式表、图片文档等）发出两个HTTP允诺。performance.getEntries方法以数组形式返回大部份允诺的天数统计信息。

performance.navigation// performance还能提供用户行为信息，比如互联网允诺的类型和重定向次如有，一般都存放在performance.navigation对象里面。

performance.navigation.redirectCount// 历史记录当前网页重定向跳转的次数。

参考资料：https://www.w3.org/TR/resource-timing/。

Performance Timing API描述了网页天然资源从读取到导出各期的执行关键性点天数历史记录，但是无法统计JavaScript执行操作过程中系统天然资源的占用情况。Profile是Chrome和Firefox等国际标准应用程序提供的一种用作试验网页脚本运行时系统内存和CPU天然资源占用情况的API，以Chrome应用程序为例，紧密结合Profile，能实现以下两个功能。

1．预测网页脚本执行操作过程中最耗天然资源的操作

2．历史记录网页脚本执行操作过程中JavaScript对象耗用的内存与堆栈的采用情况

3．检测网页脚本执行操作过程中CPU占用情况

采用console.profile()和console.profileEnd()就能预测中间一段代码执行时系统的内存或CPU天然资源的耗用情况，然后配合应用程序的Profile查看比较耗用系统内存或CPU天然资源的操作，这种就能有特别针对性地进行强化了。

console.profile();

// TODOS，需要试验的网页逻辑动作

for(leti = 0;i < 100000;i++){

console.log(i *i);

}

console.profileEnd();

采用Profile能在一定程度上帮助他们预测网页的操控性，但缺关键性操作过程耗时排序，他们还希望检测代码的具体内容导出或执行天数，这就无法写很多的console.profile()和console.profileEnd()来逐段实现，为了更加单纯地处理这种情况，往往选择通过脚本埋点计时的方式来统计每部份代码的运行天数。

网页JavaScript埋点计时比较容易实现，和Performance Timing历史记录天数戳有点类似，他们能历史记录JavaScript代码早已开始执行的时间戳，后面在需要历史记录的地方埋点历史记录完结时的天数戳，最后透过差值来排序一段HTML导出或JavaScript导出执行的天数。为了方便操作，能将某个操作早已开始和完结的天数戳历史记录到两个数组中，然后预测数组之间的间隔就获得每一步骤的执行天数，下面来看两个天数点历史记录和预测的例子。

let timeList = [];

functionaddTime(tag){

timeList.push({

“tag”: tag,

“time”: +newDate

});

}

addTime(“loading”);

timeList.push({

“tag”: “load”,

“time”: +newDate()

});

// TODOS，load读取时的操作

timeList.push({

“tag”: “load”,

“time”: +newDate()

});

timeList.push({

“tag”: “process”,

“time”: +newDate()

});

// TODOS，process处理时的操作

timeList.push({

“tag”: “process”,

“time”: +newDate()

});

parseTime(timeList);// 输出{load: 天数毫秒数，process: 天数毫秒数}

functionparseTime(time){

let timeStep = {},

endTime;

for(leti = 0,len = time.length;i < len;i++){

if(!time[i])continue;

endTime = {};

for(letj = 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;

}

}

returntimeStep;

}

这种方式常常在移动端网页中采用，因为移动端应用程序HTML导出和JavaScript执行相对较慢，通常为了进行操控性强化，他们需要找到网页中执行JavaScript耗时的操作，如果将关键性JavaScript的执行操作过程进行埋点计时并上报，就能轻松找出JavaScript执行慢的地方，并有特别针对性地进行强化。

他们还能借助应用程序或其他工具的天然资源读取排程图来帮助预测网页天然资源读取操作过程中的操控性问题。这种方法能粗粒度地宏观预测应用程序的大部份天然资源文件允诺耗时和文档读取顺序情况，如保证CSS和数据允诺等关键性性天然资源优先读取，JavaScript文档和网页中非关键性性图片等内容延后读取。如果因为某个天然资源的读取十分耗时而阻塞了网页的内容展示，那就要着重考虑。因此，他们需要透过天然资源读取排程图来辅助预测网页上天然资源读取顺序的问题。

图2

依照此图，他们能很直观地看到网页上各天然资源读取操作过程所需要的天数和相继顺序，有利于找出读取操作过程中比较耗时的文档天然资源，帮助他们有特别针对性地进行强化。

觉得本文对你有帮助？请分享给更多人

后端技能