性能追踪网站
这是一个用于追踪网页性能的网站。通过使用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);  

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