前端性能优化(一) Performance.timing

页面加载、渲染的一些时间节点


在浏览器中可以使用window.performance.timing获取到这些值(IE9+),其中各个时间点(毫秒时间戳)的意义:
navigationStart
在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等
unloadEventStart
前一个网页(与当前页面同域)unload的时间戳
unloadEventEnd
前一个网页unload事件绑定的回调函数执行完毕的时间戳
redirectStart
第一个HTTP重定向发生时的时间(有跳转且是同域名内的)
redirectEnd
最后一个HTTP重定向完成时的时间
fetchStart
浏览器准备好使用HTTP请求抓取文档的时间,这发生在检查本地缓存之前
domainLookupStart
DNS域名查询开始的时间
如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
domainLookupEnd
DNS域名查询完成的时间
connectStart
HTTP(TCP)开始建立连接的时间
如果是持久连接,则与fetchStart值相等;如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间
connectEnd
HTTP(TCP)完成建立连接的时间(完成握手)
注意:这里握手结束,包括安全连接建立完成、SOCKS 授权通过
secureConnectionStart
HTTPS连接开始的时间,如果不是安全连接,则值为 0
requestStart
HTTP请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存,连接错误重连时,这里显示的也是新建立连接的时间
responseStart
HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存
responseEnd
HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存


domLoading
开始解析第一批收到的 HTML 文档的字节,此时Document.readyState变为 loading,并将抛出readystatechange相关事件
domInteractive
HTML解析完成,DOM结构构建完毕,Document.readyState变为interactive,并将抛出readystatechange相关事件
此时的CSS和图片可能没有完全加载或解析完成
DOMContentLoaded事件
如果没有解析器阻塞 JavaScript,会在 domInteractive 之后立即触发,jQuery的ready()也是使用的这个事件
domContentLoadedEventStartdomContentLoadedEventEnd分别是DOMContentLoaded事件开始和结束的时间
domComplete
DOM树解析完成,且资源也准备就绪,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件
loadEvent事件
作为网页加载的最后一步以便触发附加的应用逻辑
loadEventStartloadEventEnd是事件开始和结束的时间

由performance得到的一些数据

重定向时间

redirectEnd - redirectStart

DNS查询时间

domainLookupEnd - domainLookupStart

白屏时间

responseStart - navigationStart

以上几个和后端性能有关,如果耗时比较长可以考虑服务端有什么优化方法比如DNS预加载啊、接口速度啊、缓存啊之类的

解析DOM树耗时
DOM节点多少、嵌套层级,CSS太大,JS阻塞页面等等

domComplete - domInteractive

domready时间

domContentLoadedEventEnd - navigationStart

FP,FirstPaint

performance.getEntriesByType('paint')[0].startTime

TTI
接近用户看到首屏的时间,而且可以和页面交互

domInteratice - requestStart

总结下常用的几个

其他

可以使用performance.mark标记时间,然后用performance.getEntrisByName获取

一些指标

  • First Paint (FP) 首绘时间
  • First Contentful Paint (FCP) 抓到的第一字节被绘制的时间 文本或图或非内容的样式
  • First Meaningful Paint (FMP) 浏览器收集布局变化,当布局发生最大变化的时间
  • First Interactive (FI) 首次可交互时间
  • Time to Interactive (TTI) 首次可持续交互时间
  • Consistently Interactive (CI) 网页完全可交互时间

打开chrome的performance面板里面有三条线
浅绿 FP
蓝色 DOMContentLoaded event
红色 load event

还可以使用Lighthouse插件测试移动页面的性能

参考

Navigation Timing
初探 performance – 监控网页与程序性能 | AlloyTeam
知乎live 高效前端实践:如何监控性能 & 分析数据?

Comments
Write a Comment