一、各种性能

加载的性能、交互的性能、代码运行时的性能......

二、参考指标

1、navigationTime        window.performance.timing 或  window.performance .getEntriesByType('navigation')

・navigationStart：0                      点击页面链接、刷新、导航栏被修改

・redirectStart：                            重定向时才有

・redirectEnd：                             重定向时才有

・fetchStart：49                             开始加载资源

・domainLookupStart：49             dns 查询开始

・domainLookupEnd：49              dns 查询结束

・connectStart：49                        TCP 链接开始建立的时间

・secureConnectionStart：49        TCP 加密握手开始建立的时间

・connectEnd：49                         TCP链接建立完成的时间

・requestStart：51                         浏览器发出文档加载 HTTP 请求的时间点

・responseStart：183                    Time to first byte (TTFB)

・responseEnd：187                     连接关闭

・domLoading：189                      浏览器获取到了足够的 HTML，即将开始进行解析；这时 document.readyState 变为 'loading'

・domInteractive：393                  DOM 构建完成；这时 document.readyState 变为 ‘interactive’

・domContentLoaded：393        The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.       DOM 和 CSSOM 都构建完成了，可以开始构建 render tree。如果没有 JavaScript 脚本需要解析，那么 domInteractive 之后立刻就是 domContentLoaded。

・domComplete：518                    所有的资源（CSS、字体、图片等）都加载完成。这时 document.readyState 变为 'complete'

・loadEventStart：518                  the time immediately before the load event is fired

・loadEventEnd：518                   the load event is completed

2、paintTime   window.performance.getEntriesByType('paint')

First Paint: The time when the first pixel is painted onto the screen. For example a background color of the page.

First Contentful Paint (FCP): The time when the first content piece from the DOM is painted, i.e. some text or an image.

First Meaningful Paint(FMP): The time when the browser paints the content that users are interested in. This is highly depends on the page.

The first two can actually be tracked by Chromes timing API and reported in Google Analytics for example.

The first meaningful paint (FMP) cannot be measured from browser APIs at the moment. The general idea when measuring the FMP would be to define Hero Elements, i.e. elements that make up the main user content, and measure their paint times. Currently there is no way to get the paint times of a specific element in the DOM

Tools like Lighthouse or WebPageTest estimate the FMP by taking the biggest layout change when rendering as the primary candidate.

三、page lifecycle

dom树构建完成  document.ready     DOMContentLoaded         – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may be not yet loaded.

domComplete     onload   – the load event of the current document is completed

beforeunload/unload – when the user is leaving the page.

首屏计算方案

https://github.com/weidian-inc/FE-blog/issues/1

参考：

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint

https://stackoverflow.com/questions/42209419/time-to-first-paint-vs-first-meaningful-paint

https://www.html5rocks.com/en/tutorials/webperformance/basics/