Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。

# 一、回顾页面加载过程

要学习这套API的使用，先简单介绍下前端的基础知识

# 1.1 页面加载

一个页面的请求到响应再到显示出来，需要经过下面一些重要过程，当我们在浏览器输入一个URL或者说点击一个URL开始，会出现如下流程

• 页面准备
• 重定向：在header定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。
• app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。
• DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。
• TCP连接：http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect，但是依赖于长连接，不会产生这个过程。
• request header：请求头信息。
• request body：请求体信息，比如get请求是没有请求体信息的，所以没有这个过程，这就是为什么把头跟体分开写的原因。
• response header：响应头信息。
• response body：响应体信息。
• 解析HTML结构
• 加载外部脚本和样式表文件：正常来说JS、css都是外部加载的，当然有不正常的人啊，比如我。
• 解析并执行脚本代码
• 构建与解析HTML DOM树：这个过程可以去了解下DOM树是怎样的就明白啦。
• 加载外部图片
• 页面加载完成，显示出来啦

# 1.2 重定向分析

• app cach
• DNS解析
• TCP连接
• request header
• 重定向
• app cach
• DNS解析
• TCP连接
• request header

# 二、performance

# 2.1 performance.timing

这个API能帮我们得到整个页面请求的时间，如下图，在Chrome的Console是可以直接运行的

先解释下这些时间都是代表什么

timing 对象里边的数据比较多，梳理如下几个关键性的节点

• fetchStart：发起获取当前文档的时间点，我的理解是浏览器收到发起页面请求的时间点；
• domainLookupStart：返回浏览器开始DNS查询的时间，如果此请求没有DNS查询过程，如长连接、资源cache、甚至是本地资源等，那么就返回 fetchStart的值；
• domainLookupEnd：返回浏览器结束DNS查询的时间，如果没有DNS查询过程，同上；
• connectStart：浏览器向服务器请求文档，开始建立连接的时间，如果此连接是一个长连接，或者无需与服务器连接（命中缓存），则返回domainLookupEnd的值；
• connectEnd：浏览器向服务器请求文档，建立连接成功的时间；
• requestStart：开始请求文档的时间（注意没有requestEnd）;
• responseStart：浏览器开始接收第一个字节数据的时间，数据可能来自于服务器、缓存、或本地资源；
• unloadEventStart：卸载上一个文档开始的时间；
• unloadEventEnd：卸载上一个文档结束的时间；
• domLoading：浏览器把document.readyState设置为“loading”的时间点，开始构建dom树的时间点；
• responseEnd：浏览器接收最后一个字节数据的时间，或连接被关闭的时间；
• domInteractive：浏览器把document.readyState设置为“interactive”的时间点，DOM树创建结束；
• domContentLoadedEventStart：文档发生DOMContentLoaded事件的时间；
• domContentLoadedEventEnd：文档的DOMContentLoaded 事件结束的时间；
• domComplete：浏览器把document.readyState设置为“complete”的时间点；
• loadEventStart：文档触发load事件的时间；
• loadEventEnd：文档出发load事件结束后的时间

再来一张图，表示各阶段的开始与结束对应的时间

从以上的分析，我们就可以得到一些时间的计算

• 准备新页面耗时：fetchStart - navigationStart
• 重定向时间：redirectEnd - redirectStart
• App Cache时间：domainLookupStart - fetchStart
• DNS解析时间：domainLookupEnd -domainLookupStart
• TCP连接时间：connectEnd - connectStart
• request时间：responseEnd - requestStart 这个计算是代表请求响应加起来的时间
• 请求完毕到DOM树加载：domInteractive -responseEnd
• 构建与解析DOM树，加载资源时间：domCompleter -domInteractive
• load时间：loadEventEnd - loadEventStart
• 整个页面加载时间：loadEventEnd -navigationStart
• 白屏时间：responseStart-navigationStart

Preview

• 一、回顾页面加载过程
  • 1.1 页面加载
  • 1.2 重定向分析
• 二、performance
  • 2.1 performance.timing
  • 2.2 performance.getEntries()
  • 2.3 performance.memory
• 三、动画帧率FPS
  • 3.1 流畅动画的标准
  • 3.2 获取我们页面动画当前的 FPS 值
    • 3.2.1 方法一 借助 Chrome 开发者工具
    • 3.2.2 方法二 借助 Frame Timing API
    • 3.2.3 方法三 借助 requestAnimationFrame API

← webpack常用插件总结篇Hexo接入DaoVoice实现在线聊天功能 →