从一次风趣的试验进修机能优化

从一次试验进修机能优化

Web API之Performance 接口详解

下图是Performance 接口的属性,供应给定页面的与时候相干的机能信息.

• navigation 包含了页面阅读上下文的导航信息，比方大批猎取资本的重定向。

  • redirectCount示意页面加载前经由重定向次数,该接口有同源战略限定，即仅能检测同源的重定向。

  • 返回值应该是0,1,2,255中的一个。离别对应三个罗列值:
    0 : TYPE_NAVIGATE (用户经由历程通例体式格局接见页面，比方点一个链接，输入地点等)
    1 : TYPE_RELOAD (用户经由历程革新，包含JS挪用革新接口(Location.reload())等体式格局接见页面)
    2 : TYPE_BACK_FORWARD (用户经由历程阅读器历史记录接见本页面)
    255: 其他体式格局

• memory包含了客栈运用情况信息,usedJSHeapSize示意一切被运用的js客栈内存；totalJSHeapSize示意当前js客栈内存总大小，这示意usedJSHeapSize不能大于totalJSHeapSize。

• timing包含了页面加载时候相干的机能信息。

  • 主要的参数:

  1. navigationStart:预备加载新页面的肇端时候,平常认为是页面最初的时候.平常和fetchStart值相称,和connectEnd中心的时候用于DNS剖析,竖立TCP衔接.

  2. requestStart:返回从服务器、缓存、当地资本等，最先请求文档的时候,平常用于统计收集资本请求的时候.

  3. domLoading:返回当前网页DOM构造最先剖析时（即Document.readyState属性变成“loading”、响应的readystatechange事宜触发时）的时候,与domComplete对应,用于统计页面衬着时候.

  4. domComplete：返回当前网页DOM构造天生时候,此时页面衬着完成.

  5. DNS查询耗时 ：domainLookupEnd &＃8211; domainLookupStart

  6. TCP链接耗时 ：connectEnd &＃8211; connectStart

  7. request请求耗时 ：responseEnd &＃8211; responseStart

  8. 剖析 DOM 树构造的时候:domComplete &＃8211; responseEnd;

  9. 平常白屏时候:responseStart &＃8211; navigationStart

  10. 页面总耗时:loadEventEnd/domComplete &＃8211; navigationStart

一张timing递次图供参考:


navigationStart：当前阅读器窗口的前一个网页封闭，发作unload事宜时的Unix毫秒时候戳。假如没有前一个网页，则即是fetchStart属性。
unloadEventStart：假如前一个网页与当前网页属于统一个域名，则返回前一个网页的unload事宜发作时的Unix毫秒时候戳。假如没有前一个网页，或许之前的网页跳转不是在统一个域名内，则返回值为0。
unloadEventEnd：假如前一个网页与当前网页属于统一个域名，则返回前一个网页unload事宜的回调函数终了时的Unix毫秒时候戳。假如没有前一个网页，或许之前的网页跳转不是在统一个域名内，则返回值为0。
redirectStart：返回第一个HTTP跳转最先时的Unix毫秒时候戳。假如没有跳转，或许不是统一个域名内部的跳转，则返回值为0。
redirectEnd：返回末了一个HTTP跳转终了时（即跳转回应的末了一个字节接收完成时）的Unix毫秒时候戳。假如没有跳转，或许不是统一个域名内部的跳转，则返回值为0。
fetchStart：返回阅读器预备运用HTTP请求读取文档时的Unix毫秒时候戳。该事宜在网页查询当地缓存之前发作。
domainLookupStart：返回域名查询最先时的Unix毫秒时候戳。假如运用耐久衔接，或许信息是从当地缓存猎取的，则返回值等同于fetchStart属性的值。
domainLookupEnd：返回域名查询终了时的Unix毫秒时候戳。假如运用耐久衔接，或许信息是从当地缓存猎取的，则返回值等同于fetchStart属性的值。
connectStart：返回HTTP请求最先向服务器发送时的Unix毫秒时候戳。假如运用耐久衔接（persistent connection），则返回值等同于fetchStart属性的值。
connectEnd：返回阅读器与服务器之间的衔接竖立时的Unix毫秒时候戳。假如竖立的是耐久衔接，则返回值等同于fetchStart属性的值。衔接竖立指的是一切握手和认证历程悉数终了。
secureConnectionStart：返回阅读器与服务器最先平安链接的握手时的Unix毫秒时候戳。假如当前网页不请求平安衔接，则返回0。
requestStart：返回阅读器向服务器发出HTTP请求时（或最先读取当地缓存时）的Unix毫秒时候戳。
responseStart：返回阅读器从服务器收到（或从当地缓存读取）第一个字节时的Unix毫秒时候戳。
responseEnd：返回阅读器从服务器收到（或从当地缓存读取）末了一个字节时（假如在此之前HTTP衔接已封闭，则返回封闭时）的Unix毫秒时候戳。
domLoading：返回当前网页DOM构造最先剖析时（即Document.readyState属性变成“loading”、响应的readystatechange事宜触发时）的Unix毫秒时候戳。
domInteractive：返回当前网页DOM构造终了剖析、最先加载内嵌资本时（即Document.readyState属性变成“interactive”、响应的readystatechange事宜触发时）的Unix毫秒时候戳。
domContentLoadedEventStart：返回当前网页DOMContentLoaded事宜发作时（即DOM构造剖析终了、一切剧本最先运转时）的Unix毫秒时候戳。
domContentLoadedEventEnd：返回当前网页一切须要实行的剧本实行完成时的Unix毫秒时候戳。
domComplete：返回当前网页DOM构造天生时（即Document.readyState属性变成“complete”，以及响应的readystatechange事宜发作时）的Unix毫秒时候戳。
loadEventStart：返回当前网页load事宜的回调函数最先时的Unix毫秒时候戳。假如该事宜还没有发作，返回0。
loadEventEnd：返回当前网页load事宜的回调函数运转终了时的Unix毫秒时候戳。假如该事宜还没有发作，返回0。


• performance的要领:

  • performance.now()返回当前网页自从performance.timing.navigationStart到当前时候之间的微秒数（毫秒的千分之一）。精度能够到达100万分之一秒。应用performance.now要领，能够获得某种操纵斲丧的正确时候。

  performance.mark('mark')
performance.mark('markEnd')
performance.measure('name', 'mark', 'markEnd')
// 消灭指定标记
performance.clearMarks('mark');
// 消灭一切标记
performance.clearMarks();


  • performance.mark()用于标记某个时候点。运用该要领参数(即标记时候点),再挪用 performance.measure(name, nameStart, nameEnd);即可测得某两个时候点之间的耗时.

  var start = performance.now();
// 被测代码
var end = performance.now();
console.log('耗时：' + (end - start) + '微秒。');

  • performance.getEntries() 资本测速:该要领以数组情势，返回请求的时候统计信息(剧本文件、款式表、图片文件等等)，有多少个请求，返回数组就会有多少个成员。单元是微秒（microsecond)

  // 统计款式,剧本,图片请求数和斲丧时候
var imgResource = {
count: 0,
time: 0
};
var cssResource = {
count: 0,
time: 0
};
var scriptResource = {
count: 0,
time: 0
};
performance.getEntries().forEach(item => {
if (item.initiatorType === 'img') {
imgResource.count++;
imgResource.time += item.duration
} else if (item.initiatorType === 'link') {
cssResource.count++;
cssResource.time += item.duration
} else if (item.initiatorType === 'script') {
scriptResource.count++;
scriptResource.time += item.duration
}
});


Canvas和svg

• Canvas基于像素，供应2D绘制函数，是一种HTML元素范例，依靠于HTML，经由历程剧本绘制图形；绘制立即形式图形,合适像素处置惩罚，动态衬着和大数据量绘制.

• SVG基于矢量，供应一系列图形元素（Rect, Path, Circle, Line …），另有完全的动画，事宜机制，能自力运用，也能够嵌入到HTML中.SVG 是一个保存在内存中模子中的保存形式图形模子，而内存中模子可经由历程从新显现的代码效果举行操纵,更合适用来做动态交互.

现实对照:Echarts和Highcharts

Echarts基于Canvas,而Highcharts基于SVG,本次试验应用10万个微博签到数据来测试两者的机能差别.

1. 一最先在两个零丁文件中离别运用Echarts和Highcharts来绘制几百个点,发明因为收集,引入的库差别,两者时候不具有对照性.因而转而在统一页面中绘制.

2. 将一切依靠在head中引入,离别封装两个画图函数,用ajax从长途猎取数据,在回调函数中画图而且统计时候,从而剖析机能差别.

3. 测试代码:

Echarts函数

function renderEchart(weiboData) {
var timeStart = window.performance.now().toFixed(4);
$('.eRender span:eq(0)').html($('.eRender span:eq(0)').html() + timeStart);
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
var timeEnd = window.performance.now().toFixed(4);
console.log(timeEnd - timeStart);
$('.eRender span:eq(1)').html($('.eRender span:eq(1)').html() + timeEnd);
$('.eRender span:eq(2)').html($('.eRender span:eq(2)').html() + (timeEnd - timeStart).toFixed(4) + 'ms');
}

Highcharts函数


function renderHchart(hda) {
var timeStart = window.performance.now().toFixed(4);
$('.hRender span:eq(0)').html($('.hRender span:eq(0)').html() + timeStart);
var H = Highcharts,
map = H.maps['cn/china'],
chart;
var colors = Highcharts.getOptions().colors;
new Highcharts.Map('container',params)
var timeEnd = window.performance.now().toFixed(4);
console.log(timeEnd - timeStart);
$('.hRender span:eq(1)').html($('.hRender span:eq(1)').html() + timeEnd);
$('.hRender span:eq(2)').html($('.hRender span:eq(2)').html() + (timeEnd - timeStart).toFixed(4) + 'ms');
}

4.测试效果:因为svg没法画出10万个点(阅读器会卡死),画3000点就须要7s.所以下面svg最多只画3000个点.
画100个点:
Echarts画10万个点,highcharts画3000个点:]
Echarts零丁画10万个点:
highcharts零丁画3000个点:

总结:试验效果很轻易展望,canvas一定比基于dom的svg机能好得多,而且假如运用webGL,应用显卡加快,机能会进一步提拔.然则测试中碰到许多有价值的题目,比方怎样应用js猎取页面机能信息,从而做出优化战略,怎样控制变量消除滋扰要素使得测试更具有说服力.试验中对performance以及面板的深切相识也使得我对页面全部衬着流程有了更深的熟悉.