性能追踪网站 这是一个用于追踪网页性能的网站。通过使用window.performance对象,我们可以方便地测量页面加载时间、资源加载时间等关键性能指标。

功能介绍

  1. window.performance.mark:用于标记一个代码执行点,以便后续计算性能数据。
  2. window.performance.measure:用于创建一个自定义性能度量,可以在浏览器中收集指定的事件或计时器数据。
  3. window.performance.now:用于获取当前时间戳,减去navigationStart时间戳可以得到页面加载开始的时间,从而计算页面加载时间。

使用方法

  1. 首先,在页面的<head>标签内引入此脚本:
<script src="path/to/performance-utils.js"></script>
  1. 然后,在需要追踪性能的地方调用window.performance.markwindow.performance.measure,例如:
// 记录开始时间
window.performance.mark('start');

// 执行一些操作,如请求数据、DOM操作等
$.ajax({url: "example.com"}).done(function() {
// ...
});

// 记录结束时间并创建性能度量
window.performance.mark('end');
var performanceMeasure = new PerformanceMeasure('custom measure', 'start', 'end');

// 输出性能度量结果
console.log(performanceMeasure);

通过以上方法,你可以轻松地追踪网页性能,优化用户体验。更多详细信息和示例,请参考官方网站:性能追踪网站