window.performance.timing属性详解

window.performance.timing属性详解

> performance
Performance {timeOrigin: 1589787313623.81, onresourcetimingbufferfull: null, memory: MemoryInfo, navigation: PerformanceNavigation, timing: PerformanceTiming}
memory: MemoryInfo
jsHeapSizeLimit: 4294705152
totalJSHeapSize: 24727288
usedJSHeapSize: 24157764
__proto__: MemoryInfo
navigation: PerformanceNavigation
redirectCount: 0
type: 0
__proto__: PerformanceNavigation
onresourcetimingbufferfull: null
timeOrigin: 1589787313623.81
timing: PerformanceTiming
connectEnd: 1589787313724
connectStart: 1589787313657
domComplete: 1589787317150
domContentLoadedEventEnd: 1589787315183
domContentLoadedEventStart: 1589787315182
domInteractive: 1589787315182
domLoading: 1589787314987
domainLookupEnd: 1589787313657
domainLookupStart: 1589787313648
fetchStart: 1589787313640
loadEventEnd: 1589787317196
loadEventStart: 1589787317150
navigationStart: 1589787313623
redirectEnd: 0
redirectStart: 0
requestStart: 1589787313724
responseEnd: 1589787314993
responseStart: 1589787314962
secureConnectionStart: 1589787313689
unloadEventEnd: 0
unloadEventStart: 0
__proto__: PerformanceTiming
__proto__: Performance

每一个performance.timing属性都表示一个页面事件（例如页面发送了请求）或者页面加载（例如当DOM开始加载），测量以毫秒的形式从1970年1月1日的午夜开始。结果为0表示该事件未发生（例如redirectEnd或者redirectStart等）。

navigationStart：
当load/unload动作被触发时，也可能是提示关闭当前文档时（即回车键在url地址栏中按下，页面被再次刷新，submit按钮被点击）。如果当前窗口中没有前一个文档，那么navigationStart的值就是fetchStart。

redirectStart：
它可能是页面重定向时的开始时间（如果存在重定向的话）或者是0。

unloadEventStart：
如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。否则的话（前一个文档非同源或者没有前一个文档），为0。
所谓同源是指，域名，协议，端口相同。

unloadEventEnd：
表示同源的前一个文档卸载完成的时刻。如果前一个文档不存在或者非同源，则为0。

redirectEnd：
如果存在重定向的话，redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。否则的话就是0。

fetchStart：
fetchStart是指在浏览器发起任何请求之前的时间值，这个时间点会在检查任何应用缓存之前。注：在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存。

domainLookupStart：
这个属性是指当浏览器开始检查当前域名的DNS之前的那一时刻。如果因为任何原因没有去检查DNS（即浏览器使用了缓存，持久连接，或者本地资源），那么它的值等同于fetchStart。

domainLookupEnd：
指浏览器完成DNS检查时的时间。如果DNS没有被检查，那么它的值等同于fetchStart。

【注：DNS查询请求是UDP，不需要TCP连接】

connectStart：
当浏览器开始于服务器连接时的时间。如果资源取自缓存（或者服务器由于其他任何原因没有建立连接，例如持久连接），那么它的值等同于fetchStart。

connectEnd：
当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接它的值等同于fetchStart建立的或者建立的是持久连接，则返回值等同于 fetchStart 属性的值。连接建立指的是所有握手（TCP）和认证过程（SSL协商）全部结束。

【注：如果命中强缓存，则不会发起请求，即不会存在DNS查询和TCP连接这两个过程，都等于fetchStart】

secureConnectionStart：
可选。如果页面使用HTTPS，它的值是浏览器与服务器开始安全链接的握手时刻（SSL协商开始时刻，会将数据进行加密）。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0。

requestStart：
返回浏览器向服务器发出 HTTP 请求时（或开始读取本地缓存时）的时刻。

responseStart：
指客户端收到从服务器端返回的（或读取本地缓存时返回的）第一个字节的数据的时刻。

responseEnd：
指客户端收到从服务器端返回的（或读取本地缓存时返回的）最后一个字节的数据的时刻。

domLoading：
这是整个加载进程开始的时间戳。浏览器从这个时间点开始解析收到的HTML页面的第一个字节。
此时 document.readyState 等于 loading，并触发 readystateChange 事件。

domInteractive：
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（不包括defer或者async属性异步加载的情况）。代表html文档解析完毕（即dom tree创建完成）但是内嵌异步资源（比如外链css、js等）还未加载的时间点；
此时 document.readyState 等于 interactive，并触发 readystateChange 事件。

domContentLoadedEventStart：
当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻。
【注：defer脚本会在此刻都加载和解析完，但还未开始执行；async脚本可能在此刻之前加载完并立即执行完，也可能在此刻之后加载完并立即执行完。】

（
DomContentLoaded：实际不存在这个属性，指的是事件。
页面文档完全加载并解析完毕之后,会触发 DOMContentLoaded 事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载（load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。
【注：defer脚本一定会DomContentLoaded事件触发前都执行完（来自Chrome for Developers文档）；async脚本可能在此刻之前加载完并立即执行完，也可能在此刻之后加载完并立即执行完。】
【DCL统计的是DomContentLoaded触发的时间（来自Chrome for Developers文档）】

DOMContentLoaded事件触发的时候页面不一定有内容渲染出来了，例如头部的link标签还没加载完，CSSOM还没构建好，即使此时link标签后的DOM树已经解析构建完成，这时候页面也不会渲染link标签后的DOM元素。若link之前已经有构建好的DOM元素，则会提前渲染在页面上（渲染引擎的优化策略），但会存在闪屏的现象。因此要把加载css的link标签和style标签要放在head标签里，提前加载，避免闪屏。
css放头部的原因：
1、外链css无论放在html的任何位置都不会影响html的解析，但是会影响html的渲染（css的加载会影响DOM结构的渲染，但不会影响DOM结构的解析）
2、如果将css放在尾部，html的解析不受影响，浏览器会在 css 样式加载解析完后，重新计算样式绘制，会造成回流重绘、页面闪动等现象
3、如果将css放在头部，css的下载解析时可以和html的解析并行，并且会等待css下载解析完毕后开始绘制

css不会阻塞DOM树的构建，但会阻塞页面的渲染。浏览器构建 DOM树 和 构建 CSSOM树是并行的，解析CSS样式资源时，CSS会异步下载，不会阻塞浏览器构建DOM树，但是会阻塞渲染，在构建渲染树时，会等css下载解析完毕后才进行，防止css规则发生变化。（CSS加载会阻塞后面的的JS语句的执行，因为HTML5标准中有一项规定，浏览器在执行Script脚本前，必须保证当前的的外联CSS已经解析完成，因为JS可能会去获取或者变更DOM的CSS样式，如果此时外联CSS还没解析好，获取到的结果就是不准确的）。

script标签要放在body标签的底部是因为现代浏览器为了更好的用户体验，渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有DOM解析完成后才布局渲染树。而是当js阻塞发生时，会将已经构建好的DOM元素渲染到屏幕上，减少白屏的时间。
）

domContentLoadedEventEnd：
当DOMContentLoaded事件完成之后的时刻。所有需要立即执行的脚本已经被执行，此时所有的async脚本也都被执行完了。

domComplete：
如果已经没有任何延迟加载的事件（所有图片和异步资源的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转。
此时 document.readyState 等于 complete，并触发 readystateChange 事件。

loadEventStart：
该属性返回的是load事件刚刚发生的时刻，如果load事件还没有发生，则返回0。

loadEventEnd：
该属性返回load事件完成之后的时刻。如果load事件未发生，则返回0。