J*aScript性能监控_PerformanceAPI_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript性能监控_PerformanceAPI

2025-11-30

浏览次数：次

返回列表

Performance API通过高精度时间戳提供页面加载、资源请求等性能数据。1. 使用performance.now()获取精确时间；2. 用mark和measure测量自定义逻辑耗时；3. 通过n*igation条目计算DNS、TCP、白屏等关键指标；4. 利用PerformanceObserver监听动态资源加载。结合上报机制可构建完整前端监控体系，持续优化用户体验。

javascript性能监控_performanceapi

前端性能监控是优化用户体验的关键环节，J*aScript中的Performance API为开发者提供了精确测量应用性能的能力。它基于高精度时间戳，能帮助我们获取页面加载、资源请求、脚本执行等关键阶段的耗时信息。

Performance API 核心功能

Performance API 是浏览器内置的接口，位于 window.performance 对象下，主要包含以下几个核心部分：

performance.now()：返回自页面加载以来的高精度时间（毫秒），比 Date.now() 更精确，不受系统时钟调整影响。
performance.timing：提供页面加载各个阶段的时间戳（已废弃，推荐使用 N*igation Timing Level 2）。
performance.getEntries()：获取所有已记录的性能条目，包括资源加载、Paint、Frame 等。
performance.mark() 和 performance.measure()：用于自定义打点和测量时间段。

使用 mark 和 measure 进行自定义性能测量

在复杂应用中，我们常需要测量某段逻辑的执行时间，比如接口响应、组件渲染等。利用 mark 和 measure 可轻松实现：

// 打标记
performance.mark('start-data-fetch');
<p>fetch('/api/data')
.then(res => res.json())
.then(data => {
performance.mark('end-data-fetch');
// 记录耗时
performance.measure('data-fetch-time', 'start-data-fetch', 'end-data-fetch');
});</p>

之后可通过 performance.getEntriesByType('measure') 获取测量结果：

const measures = performance.getEntriesByType('measure');
console.log(measures); // [{ name: "data-fetch-time", duration: 120.5, ... }]

监控页面加载性能

利用 n*igationStart 和 loadEventEnd 等时间点，可以计算关键性能指标：

HTML5微信网页调用监控|直播|

HTML5微信网页调用监控|直播|软件实现了微信远程监控的功能。本代码实现了HTML5方式调用监控摄像头的实时|直播|画面，支持微信网页直接调用，PC电脑、安卓手机、苹果手机。特性一：支持市面上95%以上的摄像头直接接入。网络摄像机需支持标准协议ONVIF（所有的主流摄像机均已支持），模拟摄像机经过网关设备转码后100%支持;特性二：在PC电脑网页浏览情况下FLASH优先，在安卓(android),IPh

3 查看详情 HTML5微信网页调用监控直播

const perfData = performance.getEntriesByType("n*igation")[0];
console.log(`DNS查询耗时: ${perfData.domainLookupEnd - perfData.domainLookupStart}`);
console.log(`TCP连接耗时: ${perfData.connectEnd - perfData.connectStart}`);
console.log(`白屏时间: ${perfData.responseStart - perfData.n*igationStart}`);
console.log(`DOM渲染完成: ${perfData.domContentLoadedEventEnd - perfData.n*igationStart}`);
console.log(`页面完全加载: ${perfData.loadEventEnd - perfData.n*igationStart}`);

结合 PerformanceObserver 监听动态资源

对于异步加载的资源（如图片、脚本），可使用 PerformanceObserver 实时监听：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name} 加载耗时: ${entry.duration}`);
    // 可上报到服务器
  }
});
// 观察资源加载
observer.observe({ entryTypes: ['resource'] });

这种方式适用于懒加载图片、动态 import 等场景，能更全面地掌握运行时性能表现。