前言

从nodejs现世以来，Web前端开发以及运行变得越发的多样化，使得JavaScript在前端承载的业务越来越复杂，用户对于前端体验要求也越来越高，前端性能的优劣对业务营收就有了更加深远的影响。

那么如何才能在我们前端开发过程中，有效的提高优化前端性能效率，如何根据我们前端业务中更加关心的一些优化指标去完成我们的前端优化。

Navigation Timing API

Navigation Timing API是W3C性能小组引入的用于前端性能监控的API。通过该API我们可以检测到前端白屏时间、首屏时间、用户可操作的时间节点、页面总下载的时间、DNS查询的时间、TCP链接的时间等各种指标，用来提高和优化我们的前端工程。

通过以上API我们可以计算很多前端页面性能相关指标，如前端页面加载中普遍关注的首字节时间、白屏时间、首屏时间等。

前端页面性能分析

通过上一小节所得到Navigation API计算得到我们前端页面性能分析所需要的诸多性能指标。

let index = {};
let times = window.performance.timing;

首字节

主文档返回第一个字节的时间，是页面加载性能比较重要的指标。对用户来说一般无感知，对于开发者来说，则代表访问网络后端的整体响应耗时。

index.ttfbTime = times.responseStart - times.startTime;

白屏时间

对于前端工程最重要的指标之一，用户对于页面的第一印象来源于等待请求页面文档开始渲染的时间，也是页面资源解析完成开始进入渲染阶段的时间。整个过程包括dns查询、建立tcp链接、发送首个http请求等过程、返回html文档。

index.blankTime = (times.domInteractive || times.domLoading) - times.fetchStart;

首屏时间

另一个用户体验相关的重要指标，用户对于等待页面加载完成所用的时间近乎是苛刻的，当页面未能在用户预期的时间内渲染完成，用户离开的可能性直线上升。

index.domReadyTime = times.domContentLoadedEventEnd - times.fetchStart;

DNS查询耗时

对前端工程优化具有指导意义，前端工程中DNS查询所耗费的时间。

index.dnsTime = times.domainLookupEnd - times.domainLookupStart;

TCP链接耗时 

通过这一指标我们可以了解到客户端与服务器建立链接需要的时间，进而指导我们对本地缓存、建立CDN服务器等。

index.tcpTime = times.connectEnd - times.connectStart;

页面其他资源指标

使用Resource timing API来统计资源相关的时间，performance.getEntries返回一个数组，数组的每个元素代表对应的资源的信息，该数组中PerformanceResourceTiming类型对象对应了所有请求类资源，其中initiatorType标识了该资源的类型，请求花费的时间就是duration的值。

数据上报

数据指标计算完成后，需要将计算完成的指标数据上传到服务器，完成前端页面性能监控统计。

sendBeacon

navigator对象提供的不需要在客户端上进行响应处理并且不应与其他高优先级操作竞争网络资源的单向请求的API，该API更加适合这种上报监控统计值的场景。

function reportEvent(event) {
    var data = JSON.stringify({
      event: event,
      time: performance.now()
    });
    navigator.sendBeacon('/collector', data);
  }
  document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
      var sessionData = buildSessionReport();
      navigator.sendBeacon('/collector', sessionData);
    }
  });

src属性降级

在不支持navigator对象的浏览器执行的降级方案，通过img或者script等get请求标签来执行get请求，使用get请求进行上报，不依赖与ajax等异步请求环境，实现优雅的降级。

var i = new Image();
i.onload = i.onerror = i.onabort = function () {
  i = i.onload = i.onerror = i.onabort = null;
}
i.src = url;

通过以上指标记录以及分析，我们能够更加清晰的完成前端页面性能的优化。

参考

navigation timing 2 Navigation Timing Level 2

Resource Timing 2 Resource Timing Level 2

Beacon Beacon