（一）performance初识

最新推荐文章于 2024-04-16 22:49:44 发布

雨墨轩痕

最新推荐文章于 2024-04-16 22:49:44 发布

阅读量3k

点赞数

分类专栏：性能测试文章标签： html javascript

本文链接：https://blog.csdn.net/ouyanggengcheng/article/details/62418694

版权

性能测试专栏收录该内容

3 篇文章 1 订阅

订阅专栏

performance是W3C基于前端对性能的需求下推出的一套性能API标准，这套API的目的是简化开发者对网站性能进行精确分析与控制过程，当然对于测试开发来说，也可以利用这套API开发自己的框架来得到前端性能参数。

一、前端知识

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

1.页面加载

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

（1）页面准备

（2）重定向：在header定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。

（3）app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。

（4）DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。

（5）TCP连接：http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect，但是依赖于长连接，不会产生这个过程。

（6）request header：请求头信息。

（7）request body：请求体信息，比如get请求是没有请求体信息的，所以没有这个过程，这就是为什么把头跟体分开写的原因。

（8）response header：响应头信息。

（9）response body：响应体信息。

（10）解析HTML结构

（11）加载外部脚本和样式表文件：正常来说JS、css都是外部加载的，当然有不正常的人啊，比如我。

（12）解析并执行脚本代码

（13）构建与解析HTML DOM树：这个过程可以去了解下DOM树是怎样的就明白啦。

（14）加载外部图片

（15）页面加载完成，显示出来啦。

说实话，一个页面加载要这么多流程，它不觉得累，我觉得好累啊。

2.重定向分析

为什么单独说一下这个重定向呢?因为刚开始我也想不通为什么重定向放在最开始，因为是否重定向是在request header中定义的啊，但是接着DNS、TCP连接，不应该是先DNS、TCP连接、request header再重定向吗？答案是的，来看看下面流程：

（1）app cach

（2）DNS解析

（3）TCP连接

（4）request header

（5）重定向

（6）app cach

（7）DNS解析

（8）TCP连接

（9）request header

从上面就可以看出来，实际上面15个步骤我是把重定向的过程没有写的那么细啦，而实际重定向本身就是要经过DNS、TCP连接、request header再重定向的。所以说一般

有重定向的请求耗时会多一些。

二、performance

说完了前端的东西，这下轮到说正题啦，开始介绍到performance提供了一套API，下面就从API介绍开始吧。

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事件结束后的时间