127 、performance性能测试

Perform作为前端工程师，无论是业务需要还是我们对于自己开发的Web站点的要求，往往都有性能监测以及数据上报的需求。而Performance API除了简单易用对前端工程师极其友好的特点之外，还有能提供高精确度的时间测量（千分之一毫秒）这个特点。

window.onload = function(){setTimeout(function(){let t = performance.timingconsole.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))if(t = performance.memory){console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')}})
}

一，performance中会出现的属性字段：

memory：只有在chrome才有，提供了基本内存的使用情况

navigation：提供了操作的上下文，包括页面的加载，刷新，重定向次数等等

timing：提供了浏览器上下文事件结束的各种UNIX时间戳（当前的时间ms，不是时间段）

方法字段：

performance.getEntries() /：对网页发起的所有HTTP请求耗时信息统计（时间段 ms）

二，memory属性

jsHeapSizeLimit：内存大小限制

totalJSHeapSize：可使用的内存大小

usedJSHeapSize：JS对象（包括V8引擎内部对象）占用的内存

三，navigation属性

redirectCount：重定向次数到本页面

type：0 正常页面（非刷新，重定向）1 通过刷新进入 2 通过浏览器前进后退按钮进入

255 非以上方式进入

四，timing属性

connectStart：HTTP域名解析完成的时间

connectEnd：HTTP浏览器与服务器之间连接建立完成的时间

domComplete：DOM文档解析完成，readyState变为complete

domContentLoadedEventStart：所有脚本已经执行完，开始执行DOMContentLoaded方法

domContentLoadedEventEnd：执行DOMContentLoaded方法结束

domInteractive：DOM结构加载结束，开始加载内嵌资源，readyState变为interactive

domLoading：DOM结构开始解析，readyState开始是loading

domainLookupStart：DNS域名查询开始

domainLookupEnd：DNS域名查询结束

fetchStart：浏览器发起任何请求之前的时间戳

loadEventStart：开始加载load事件

loadEventEnd：load事件加载结束

navigationStart：unload上一个文档的时间节点

redirectStart：第一个页面重定向开始的时间

redirectEnd：最后一个页面重定向结束的时间

requestStart：浏览器向服务器发起HTTP请求（包含缓存，本地资源）

responseStart：浏览器从服务器收到HTTP请求返回的第一个字节的时间

responseEnd：浏览器从服务器收到HTTP请求返回的最后一个字节的时间

secureConnectionStart：HTTPS协议握手之前的时间，如果非HTTPS，则为0

unloadEventStart：上一个文档unload事件的开始时间（需要是同源文档，否则为0）

unloadEventEnd：上一个文档unload事件的结束时间（需要是同源文档，否则为0）

五，时间应用

页面加载耗时：loadEventEnd - navigationStart

DNS查询耗时：domainLookupEnd - domainLookupStart

TCP链接完成握手耗时：connectEnd - connectStart

request请求耗时：responseEnd - responseStart

解析DOM树耗时：domComplete - domInteractive

白屏时间：domloading - fetchStart

DOMReady可操作时间：domContentLoadedEventEnd - fetchStart

onload总下载时间：loadEventEnd - fetchStart

重定向时间：redirectEnd - redirectStart

六，performance通用方法

performance.now()

根据navigation属性，开始计算毫秒数，通过两次时间相减可以计算某个操作的间隔时间

performance.mark(name)

基于name在浏览器的性能输入缓冲区中存入一个timestamp，可以多次重复录入，

可以使用performance.getEntriesByName()获取到对应的Array，

可以使用performance.clearMarks()清除

七，最后是时间关系图（W3C）

参考：Performance_js中计算网站性能监控利器_p312011150的博客-CSDN博客

Performance --- 前端性能监控 - 简书

127 、performance性能测试相关推荐

Performance性能测试工具
F12-Performance 1.功能条 2.overview总览图 fps也就是绿色的进度条越高说明每秒展示的帧数越多,越流畅,相对用户体验就越好. 3.火焰图 JS Heap,js堆,docum ...
前端性能测试lighthouse
一.git地址 https://github.com/GoogleChrome/lighthouse 二.lighthouse安装可以使用npm命令安装,npm install -g lightho ...
转帖一篇关于DELPHI调试的文章-AQTime
AQTime教程 1 简介 AQTime和MemProof都是AutomatedQA旗下的产品,AQTime比MemProof提供了更丰富强大的功能.该产品含有完整的性能和调试工具集,能够收集程序运行 ...
移动APP测试用例设计实践经验分享
我请大家先思考如下2个问题: 第一,我们为什么要做好测试用例设计? 第二,好的测试用例设计有什么共性? 深入思考这两个问题的答案是一件很有意义的事情,作为移动互联网时代的产品质量守卫军,我们必须提升自 ...
Python自动化-APPium原理解析与实际测试案例分享
目录结构一.Appium概述 Appium架构原理运行原理 1)Appium服务器 2)Bootstrap.jar 3)Appium客户端二.Appium组件三.Appium环境搭建 Node ...
移动APP测试用例设计实践经验（转载）
前言杂谈在聊移动APP测试用例设计之前,我请大家先思考如下2个问题: 第一,我们为什么要做好测试用例设计?--why? 第二,好的测试用例设计有什么共性? --what? 深入思考这2个问题的答案是 ...
移动APP测试用例设计实践经验
前言杂谈在聊移动APP测试用例设计之前,我请大家先思考如下2个问题: 第一,我们为什么要做好测试用例设计?--why? 第二,好的测试用例设计有什么共性? --what? 深入思考这2个问题的答案是 ...
性能测试 Performance Test
关于性能测试,有很多概念,如压力测试.负载测试.冒烟测试.验证测试.穿刺测试等等,一直以来,我都没有搞清楚,这段时间正好研究这方面的资料,发现,不仅我没有搞清楚,很多人都没有搞清楚,于是就定义自己的一 ...
语音识别(ASR)论文优选：性能测试Wav2Vec2.0 on the Edge: Performance Evaluation
声明:平时看些文章做些笔记分享出来,文章中难免存在错误的地方,还望大家海涵.搜集一些资料,方便查阅学习:http://yqli.tech/page/speech.html.语音合成领域论文列表请访问h ...

127 、performance性能测试

127 、performance性能测试相关推荐

最新文章

热门文章