性能测试——监控前端性能

方法一：

F12

　　在该页面中我们可以看到cpu使用率，js堆使用大小以及dom节点数，我们知道cpu以及内存使用率可以从侧面反映一个应用的一些问题，比如当页面渲染过慢，系统卡顿时，使用该功能可以观察是不是cpu使用过高或者内存使用过大导致页面刷新过慢，操作卡顿等。

　　参考链接：https://jonhuster.blog.csdn.net/article/details/104864119

 

方法二：

「Python代码实现数据采集」

 

参考代码如下：

#!/usr/bin/env python
# -*- coding: utf-8 -*-

"""
使用python监控前端性能，单位毫秒
"""

import logging
import csv
import datetime
from selenium import webdriver

# data = datetime.datetime.now().strftime('%Y%m%d%H%M')  # 获取当前的时间
# filename = "timing_{}.csv".format(data)  # 创建一个csv文件

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.maximize_window()
driver.find_element_by_id('kw').send_keys('性能测试')
driver.find_element_by_id('su').click()

# 前端性能监控的接口
js = 'return window.performance.timing'
# 执行JS脚本
timing = driver.execute_script(js)
print(timing)

logging.info(timing)
# DNS查询耗时「原因-DNS预加载做了吗？页面内是不是使用了太多不同的域名导致域名查询的时间太长了？」
DNS_time = timing["domainLookupEnd"] - timing["domainLookupStart"]

# TCP建立连接完成握手的时间
TCP_time = timing["connectEnd"] - timing["connectStart"]

# request请求耗时-内容加载完成的时间「原因：页面内容经过gzip压缩了吗？静态资源css/js等压缩了吗？」
Request_time = timing["responseEnd"] - timing["responseStart"]

# 解析dom树耗时「原因-需要反省下你的DOM树嵌套是不是太多了？」
dom_time = timing["domComplete"] - timing["domInteractive"]

# 白屏时间：从打开网站到有内容渲染出来的时间节点。白屏时间节点指的是从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，
# 一直到页面有内容展示出来的时间节点。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、
# 返回html文档、html文档head解析完毕「 读取页面第一个字节的时间，原因-可以理解为用户拿到你的资源占用的时间」
white_screen = timing["responseStart"] - timing["navigationStart"]

# onload时间「页面加载完成的时间，这几乎代表了用户等待页面可用的时间」
onload_time = timing["loadEventEnd"] - timing["navigationStart"]

# 重定向时间「拒绝重定向」
redirect_time = timing["redirectEnd"] - timing["redirectStart"]
# DNS 缓存时间
appcache_time = timing["domainLookupStart"] - timing["fetchStart"]
# 卸载页面的时间
unloadEvent_time = timing["unloadEventEnd"] - timing["unloadEventStart"]

# with open(filename, "a+", newline='') as csvfile:
#     csv_write = csv.writer(csvfile)
#
# # writerow 是一行一行写入  writerows方法是一次写入多行
# csv_write.writerow(["DNS查询耗时", "TCP链接耗时", "request请求耗时", "解析dom树耗时", "白屏时间", "DNS查询耗时", "onload时间"])
# csv_write.writerow([DNS_time, TCP_time, Requesr_time, dom_time, white_screen, domready_time, onload_time])
print("DNS查询耗时:%s ms" % str(DNS_time))
print("TCP连接耗时:%s ms" % str(TCP_time))
print("request 请求耗时:%s ms" % str(Request_time))
print("解析 dom 树耗时:%s ms" % str(dom_time))
print("白屏时间:%s ms" % str(white_screen))
print("onload 时间:%s ms" % str(onload_time))
print("重定向时间:%s ms" % str(redirect_time))
print("DNS 缓存时间:%s ms" % str(appcache_time))
print("卸载页面时间:%s ms" % str(unloadEvent_time))

driver.quit()

扫盲：

•  timing的整体结构如下图所示：

• 性能指标计算