使用Performance API进行性能监控

简介: 使用Performance API可实时监控网页性能,如加载时间、资源请求时间和用户交互响应时间。示例代码包括:计算页面加载时间(`window.onload`事件)、获取资源请求时间(`window.performance.getEntriesByType('resource')`)和监听用户交互响应时间(`performance.now()`)。

 使用Performance API进行性能监控是一种实时监测网页性能的方法。 Performance API提供了一系列的方法来测量关键指标,例如页面加载时间、资源请求时间、用户交互响应时间等。

下面是使用Performance API进行性能监控的一些示例代码:

  1. 获取页面加载时间:
window.onload = function() {
  var loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
  console.log('页面加载时间:', loadTime);
}

image.gif

  1. 获取资源请求时间:
window.addEventListener('load', function() {
  var resourceTiming = window.performance.getEntriesByType('resource');
  resourceTiming.forEach(function(entry) {
    console.log('资源请求', entry.name, '时间:', entry.duration);
  });
});

image.gif

  1. 监听用户交互响应时间:
window.addEventListener('click', function() {
  var navigationStart = window.performance.timing.navigationStart;
  var responseTime = performance.now() - navigationStart;
  console.log('用户交互响应时间:', responseTime);
});

image.gif


相关文章
|
Web App开发 数据可视化 前端开发
测试篇:性能监测之Performance、LightHouse 与性能 API
测试篇:性能监测之Performance、LightHouse 与性能 API
831 0
测试篇:性能监测之Performance、LightHouse 与性能 API
|
9月前
|
JavaScript 前端开发 网络协议
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(1)
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(1)
|
9月前
|
监控 JavaScript 前端开发
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(2)
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(2)
|
9月前
|
监控 JavaScript 前端开发
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(3)
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(3)
|
9月前
|
存储 缓存 数据库连接
每日一博 - How To Improve API Performance
每日一博 - How To Improve API Performance
33 0
|
数据采集 XML JSON
PolarDB-X 1.0-API参考-1.0(2019版本)-性能监控-DescribeDrdsInstanceMonitor
调用DescribeDrdsInstanceMonitor接口查询实例监控数据详情。
186 0
|
XML JSON 监控
PolarDB-X 1.0-API参考-1.0(2019版本)-性能监控-DescribeDrdsInstanceDbMonitor
调用DescribeDrdsInstanceDbMonitor接口查询数据库的性能监控数据。
201 0
|
监控 关系型数据库 分布式数据库
PolarDB-X 1.0-API参考-1.0(2017版本)-实例管理类 API-查询PolarDB-X的性能监控数据
功能描述 根据性能参数获取某个用户实例在某个时间段范围内的性能监控数据。默认情况下(不传参数PeriodMultiple的时候)根据时间段范围不同会有不同的统计周期: 当时间段范围小于1天,统计周期为5分钟。 当时间段范围大于1天小于2天,统计周期为10分钟。 当时间段范围大于2天小于5天,统计周期为30分钟。 当时间段范围大于5天小于一周,统计周期为1小时。 当时间段范围大于一周,则不支持。
127 0
|
监控 关系型数据库 分布式数据库
PolarDB-X 1.0-API参考-1.0(2017版本)-数据库管理类 API-查询PolarDB-X数据库的性能监控数据
功能描述 根据性能参数获取某个用户实例在某个时间段范围内的性能监控数据。根据时间段范围不同会有不同的统计周期: 当时间段范围小于1天,统计周期为5分钟。 当时间段范围大于1天小于2天,统计周期为10分钟。 当时间段范围大于2天小于5天,统计周期为30分钟。 当时间段范围大于5天小于一周,统计周期为1小时。 当时间段范围大于一周,则不支持。
109 0