High Resolution Time
- Performance Timeline
性能度量指标
- Navigation Timing
- Navigation Timing Level 1
Navigation Timing Level 2
优化策略

High Resolution Time

https://www.w3.org/TR/hr-time-3/

Time Origin

定义了测量性能数据的初始时间

DOMHighResTimeStamp

DOMHighResTimeStamp 的值是⼀个双精度浮点数，它描述了两个时间点之间的经过的毫秒数（可以精确到5微秒，如果设备⽀持）

Performance
新增 Performance对象以及属性和⽅法

now()
timeOrigin()

toJSON()

performance.timeOrigin // 时间戳
performance.now() // 距离timeOrigin的时间区间值

Performance Timeline

给Performance对象新增了三个⽅法

getEntries()

返回⼀个 PerformanceEntryList 包含 PerformanceNavigationTiming、 PerformanceResourceTiming、 PerformancePaintTiming、PerformanceMark、 PerformanceMeasure、 PerformanceEventTiming等对象，每种对象都是继承⾃PerformanceEntry

getEntriesByType()

返回通过类型筛选过的 PerformanceEntryList

getEntriesByName()

返回通过名称筛选过的 PerformanceEntryList

performance.getEntries()

定义了PerformanceEntry对象
包含⼀些基础的公共属性，⽐如name、entryType、startTime、duration等，被其他规范定义的对象继承

定义了PerformanceObserver对象
⽤来观察性能时间线，常⽤来采集性能数据

function perf_observer(list, observer) {
   // Process the "measure" event
   // 处理 "measure" 事件
}
var observer2 = new PerformanceObserver(perf_observer);
observer2.observe({entryTypes: ["measure"]});

性能度量指标

Navigation Timing

Navigation Timing Level 1

https://www.w3.org/TR/navigation-timing/
在前⾯规范的基础上增加timing和navigation两个属性

Navigation Timing Level 2

https://www.w3.org/TR/navigation-timing-2/
废弃timing和navigation两个属性

Navigation Timing Level 1

PerformanceTiming
该对象⽤来衡量⻚⾯性能，通过window.performance.timing查看，具体的每个字段解释可以在 PerformanceTiming | MDN 上查阅。

performance.timing // 返回各个时间点的 时间戳对象
{
    "connectStart": 1658415822498,
    "navigationStart": 1658415822495,
    "loadEventEnd": 1658415823028,
    "domLoading": 1658415822521,
    "secureConnectionStart": 0,
    "fetchStart": 1658415822498,
    "domContentLoadedEventStart": 1658415822662,
    "responseStart": 1658415822517,
    "responseEnd": 1658415822519,
    "domInteractive": 1658415822656,
    "domainLookupEnd": 1658415822498,
    "redirectStart": 0,
    "requestStart": 1658415822517,
    "unloadEventEnd": 0,
    "unloadEventStart": 0,
    "domComplete": 1658415823026,
    "domainLookupStart": 1658415822498,
    "loadEventStart": 1658415823026,
    "domContentLoadedEventEnd": 1658415822662,
    "redirectEnd": 0,
    "connectEnd": 1658415822498
}

PerformanceNavigation
该对象展示的是⻚⾯导航相关的信息，通过window.performance.navigation查看，具体的字段解释可以在PerformanceNavigation | MDN 上查阅。

performance.navigation
// {type: 0, redirectCount: 0}

Navigation Timing Level 2

PerformanceNavigationTiming对象
此对象包含度量⽂档性能相关的数据，可以通过 window.performance.getEntriesByType(‘navigation’)获取，该对象所有的时间值都是基于Time Origin为起点测量的。

performance.getEntriesByType('navigation')
{
    "name": "https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver",
    "entryType": "navigation",
    "startTime": 0,
    "duration": 532.5,
    "initiatorType": "navigation",
    "nextHopProtocol": "h2",
    "workerStart": 0,
    "redirectStart": 0,
    "redirectEnd": 0,
    "fetchStart": 2.5,
    "domainLookupStart": 2.5,
    "domainLookupEnd": 2.5,
    "connectStart": 2.5,
    "connectEnd": 2.5,
    "secureConnectionStart": 2.5,
    "requestStart": 21.59999999962747,
    "responseStart": 22.200000000186265,
    "responseEnd": 23.700000000186265,
    "transferSize": 10837,
    "encodedBodySize": 10537,
    "decodedBodySize": 43690,
    "serverTiming": [],
    "workerTiming": [],
    "unloadEventStart": 0,
    "unloadEventEnd": 0,
    "domInteractive": 161.29999999981374,
    "domContentLoadedEventStart": 166.70000000018626,
    "domContentLoadedEventEnd": 167.09999999962747,
    "domComplete": 530.7999999998137,
    "loadEventStart": 531,
    "loadEventEnd": 532.5,
    "type": "navigate",
    "redirectCount": 0
}

定义 NavigationType枚举值
包含四种值：navigate、reload 、 back_forward 和 prerender，其中前三个值是与Navigation Timing Level 1中的 PerformanceNavigation的 type 中的0、1、2是对应的

Paint Timing

该规范定义了获取Paint 关键时间点的性能数据的 API

PerformancePaintTiming 对象
⽤于描述在⻚⾯加载期间的⼀些关键时间点的性能度量，可以通window.performance.getEntriesByType(‘paint’)
获取

提出First Paint 、First Contentful Paint
⾸次绘制（First Paint，FP），是指浏览器从响应⽤户输⼊的⽹址到将第⼀个像素呈现到屏幕上的时间
⾸次内容绘制（First Contentful Paint，FCP），是指浏览器从响应⽤户输⼊的⽹址到⻚⾯上呈现第⼀个DOM 元素的时间

performance.getEntriesByType('paint')
[
    {
        "name": "first-paint",
        "entryType": "paint",
        "startTime": 153.79999999981374,
        "duration": 0
    },
    {
        "name": "first-contentful-paint",
        "entryType": "paint",
        "startTime": 263.3999999994412,
        "duration": 0
    }
]

Resource Timing

该规范定义了⽤于访问⽂档中资源的完整计时信息的 API

PerformanceResourceTiming对象
此对象描述了资源请求的性能时间线。

定义了Timing-Allow-Origin响应头
对于跨域请求的资源，获取到的 PerformanceResourceTiming 对象中的属性值（时间），由于跨域限制，浏览器不会将资源的性能数据提供给⽤户，这些时间值都会被设置为 0 。
如果服务端在请求资源的响应头中添加 Timing-Allow-Origin，则浏览器就会将此资源的性能时间值暴露给⽤户。

User Timing

该规范定义了⼀个可以让 Web 开发者⾃定义测量性能的 API

给Performance添加⼏个⽅法

mark(name)

时间标记，返回代码执⾏到此位置的时间，以Time Origin为基准

measure(name, startMark, endMark)

返回两个时间点的间隔时间

clearMarks(name)、clearMeasures(name)

清除相应的mark和measure

定义了 PerformanceMark对象
描述mark返回的数据，通过performance.getEntriesByType(‘mark’)可以检索到

定义了 PerformanceMeasure对象
描述 measure返回的数据，可以通过performance.getEntriesByType(‘measure’)检索到

Server Timing

该规范定义了如何获取服务端各节点性能的 API
定义Server-Timing 响应头
获取服务端性能数据

定义PerformanceServerTiming 对象
包含资源请求过程中的性能指标数据

给 PerformanceResourceTiming 对象添加 serverTiming 属性
PerformanceServerTiming 以数组的形式挂载到 PerformanceResourceTiming 对象的 serverTiming 属性上

Long Task API

该规范定义了如何检测⻓任务（Long Task）的 API
定义 PerformanceLongTaskTiming对象
返回⻓任务实例，⽤于描述 Long Task 信息，对象中各字段的含义可在 Long Tasks API | MDN 查阅

定义了什么是 Long Task
LongTask是指任何连续不间断的且主UI线程繁忙50毫秒及以上的时间区间

优化策略

Resource Hints-资源提示

DNS预解析(DNS Prefetch)
Resource Hint主要通过使⽤link标签。rel属性确定类型，href属性则指定相应的源或资源URL。DNS Prefetch
可以像下⾯这样使⽤：

<link rel="dns-prefetch" href="xxxxx“>

预连接(Preconnect)
提醒浏览器有些资源待会可能会⽤到，可以提前建⽴连接

<link rel="preconnect" href="xxxxx“>

当然也可以设置CORS

<link rel="preconnect" href="xxxxx“ crossorigin>

预获取(Prefetch)
Prefetch虽然也是资源提示中的预处理，但是跟DNS Prefetch、Preconnect不太⼀样的是，它有⼀个as属性，⽤来指定资源类型，⽽且不同的资源类型的优先级也是不⼀样的。常⽤的类型有script、style、image、html等

预渲染(Prerender)
⽤来获取下⼀个导航可能访问的html，和 prefetch 不同的是，prerender除了获取⻚⾯，还会解执⾏⻚⾯，进⾏预渲染

preload
与Resource Hints相似，浏览器在预解析的时候遇到需要Preload的资源时，浏览器会⽴刻进⾏预获取，并将结果放在内存中，资源的获取不会影响⻚⾯parse与load事件的触发。直到再次遇到该资源的使⽤标签时，才会执⾏

Page Visibility

此规范定义了⻚⾯可⻅性API
给Document添加了三个属性

Document.hidden

如果⻚⾯处于被认为是对⽤户隐藏状态时返回true，否则返回false。

Document.visibilityState

⽤来展示当前⽂档是否可⻅的DOMString，主要有三个值：visible、hidden、prerender

Document.onVisibilityChange

⻚⾯可⻅性发⽣变化的监听事件

requestIdleCallback API

给Window添加了两个⽅法

Window.requestIdleCallback()

该⽅法插⼊⼀个函数，这个函数将在浏览器空闲时期被调⽤，返回⼀个ID

Window.cancelIdleCallback()

传⼊⼀个ID，可以把它传⼊ Window.cancelIdleCallback() ⽅法来结束回调。

定义了IdleDeadLine对象
这个对象可以获取当前空闲时间以及回调是否超时时间之前已经执⾏的状态

Beacon

数据上报

前端性能优化手册

Web Performace API 入门