JavaScript内核与高级编程之：`Performance API`：`User Timing`和`Resource Timing`在性能监控中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，大家好！今天咱们来聊聊前端性能监控里的两把利剑：Performance API 里面的 User Timing 和 Resource Timing，保证让你们听完之后，以后再遇到性能问题，心里有数，手上有活。

开场白：前端性能，你的KPI，你的命！

先别急着打哈欠，我知道性能优化这事儿，听起来就让人头大。但你想想，你的网站打开慢，用户直接跑路，老板甩锅给你，这可不是闹着玩的。所以，性能优化不是你想做就做，不想做就不做的事情，它关系到你的KPI，甚至是你的职业生涯！

好消息是，浏览器已经给我们准备好了工具，那就是 Performance API。今天咱们要讲的 User Timing 和 Resource Timing 只是冰山一角，但足够让你在性能监控这条路上迈出坚实的一步。

第一部分：User Timing API – 你的代码，你做主！

User Timing API，顾名思义，就是让你自己来定义时间节点的API。它就像一个秒表，你想什么时候开始计时，想什么时候结束计时，都由你说了算。这对于监控你自己写的代码的性能，简直不要太方便！

1.1 为什么要用 User Timing？

想象一下，你写了一个复杂的函数，里面又是循环又是判断，你想知道这个函数到底花了多少时间，光靠肉眼观察，怕是等到地老天荒也看不出个所以然。这时候，User Timing 就派上用场了。

1.2 如何使用 User Timing？

User Timing API 提供了几个关键方法：

performance.mark()：标记一个时间点，相当于在秒表上按了一下“开始”或者“分段计时”。
performance.measure()：测量两个时间点之间的时间差，相当于在秒表上按了一下“停止”，然后告诉你花了多少时间。
performance.clearMarks()：清除标记，防止标记过多，影响性能。
performance.clearMeasures()：清除测量数据。
performance.getEntriesByType('mark')：获取所有mark标记
performance.getEntriesByType('measure')：获取所有measure测量数据
performance.getEntries()：获取所有performance记录

来看个例子：

function myFunction() {
  performance.mark('myFunctionStart'); // 开始计时

  // 这里是你的复杂代码
  let sum = 0;
  for (let i = 0; i < 1000000; i++) {
    sum += i;
  }

  performance.mark('myFunctionEnd');   // 结束计时

  performance.measure('myFunctionDuration', 'myFunctionStart', 'myFunctionEnd'); // 计算时间差

  const measure = performance.getEntriesByName('myFunctionDuration')[0];

  console.log(`myFunction 执行时间：${measure.duration} ms`);

  // 清理标记，好习惯要养成
  performance.clearMarks('myFunctionStart');
  performance.clearMarks('myFunctionEnd');
  performance.clearMeasures('myFunctionDuration');
}

myFunction();

这段代码简单明了，先用 performance.mark() 标记了函数的开始和结束，然后用 performance.measure() 计算了函数执行的时间，最后把时间打印到控制台。记得用完之后要 clearMarks 和 clearMeasures，保持环境整洁。

1.3 User Timing 的进阶用法

User Timing 不仅仅可以用来测量函数的执行时间，还可以用来测量页面渲染的关键步骤，比如：

DOMContentLoaded 事件触发时间
First Contentful Paint (FCP) 时间
Largest Contentful Paint (LCP) 时间
自定义的加载时间

例如，你可以这样测量 FCP：

window.addEventListener('load', () => {
  performance.mark('DOMContentLoaded');
  // 注意，这里用 load 事件，实际应用中，应该使用 FCP 相关的 API 或者 polyfill
  performance.mark('FCP');
  performance.measure('TimeToFCP', 'DOMContentLoaded', 'FCP');

  const measure = performance.getEntriesByName('TimeToFCP')[0];
  console.log(`FCP 时间：${measure.duration} ms`);

  performance.clearMarks('DOMContentLoaded');
  performance.clearMarks('FCP');
  performance.clearMeasures('TimeToFCP');
});

1.4 User Timing 的注意事项

mark 和 measure 的名称要具有描述性，方便你以后分析数据。
clearMarks 和 clearMeasures 要及时清理，避免内存泄漏。
在生产环境中使用 User Timing 时，要考虑性能开销，避免过度使用。

第二部分：Resource Timing API – 知己知彼，百战不殆！

Resource Timing API 可以让你获取页面加载过程中每个资源（例如图片、CSS、JS文件）的详细时间信息。有了这些信息，你就可以知道哪些资源加载慢，是网络问题还是服务器问题，然后对症下药，优化性能。

2.1 为什么要用 Resource Timing？

想象一下，你的网站打开慢，用户反馈说图片加载不出来，你一脸懵逼，不知道是哪张图片出了问题，也不知道是用户的网络问题还是服务器的问题。这时候，Resource Timing 就成了你的救星。

2.2 如何使用 Resource Timing？

Resource Timing API 的核心是 performance.getEntriesByType('resource')，它可以返回一个数组，包含了所有资源的加载信息。

window.addEventListener('load', () => {
  const resources = performance.getEntriesByType('resource');

  resources.forEach(resource => {
    console.log(`资源 URL：${resource.name}`);
    console.log(`资源加载时间：${resource.duration} ms`);
    console.log(`DNS 查询时间：${resource.domainLookupEnd - resource.domainLookupStart} ms`);
    console.log(`TCP 连接时间：${resource.connectEnd - resource.connectStart} ms`);
    console.log(`请求响应时间：${resource.responseEnd - resource.requestStart} ms`);
    // 更多信息可以查看 Resource Timing API 的文档
  });
});

这段代码会遍历所有资源，并打印出它们的 URL、加载时间、DNS 查询时间、TCP 连接时间和请求响应时间。有了这些信息，你就可以 pinpoint 性能瓶颈了。

2.3 Resource Timing 的进阶用法

Resource Timing 不仅仅可以用来查看资源的加载时间，还可以用来：

分析 CDN 的性能
优化图片的大小和格式
减少 HTTP 请求的数量
使用 HTTP/2 协议

2.4 Resource Timing 的注意事项

Resource Timing API 需要服务器设置 Timing-Allow-Origin 头，才能获取跨域资源的详细信息。
Resource Timing API 的数据量比较大，要注意性能开销，避免过度使用。
某些浏览器可能出于安全考虑，会限制 Resource Timing API 的使用。

第三部分：User Timing 和 Resource Timing 的结合使用 – 珠联璧合，天下无敌！

User Timing 和 Resource Timing 单独使用已经很强大了，如果把它们结合起来，就可以实现更精准的性能监控。

举个例子，你可以用 User Timing 标记一个组件的加载开始和结束，然后用 Resource Timing 找到这个组件加载的所有资源，并分析它们的加载时间。这样，你就可以知道是哪个资源拖慢了组件的加载速度。

function loadComponent() {
  performance.mark('componentStart');

  // 加载组件的代码
  loadResources(['image1.jpg', 'image2.jpg', 'style.css'], () => {
    performance.mark('componentEnd');
    performance.measure('componentDuration', 'componentStart', 'componentEnd');

    const measure = performance.getEntriesByName('componentDuration')[0];
    console.log(`组件加载时间：${measure.duration} ms`);

    const resources = performance.getEntriesByType('resource').filter(resource =>
      resource.name.includes('image1.jpg') || resource.name.includes('image2.jpg') || resource.name.includes('style.css')
    );

    resources.forEach(resource => {
      console.log(`资源 URL：${resource.name}`);
      console.log(`资源加载时间：${resource.duration} ms`);
    });

    performance.clearMarks('componentStart');
    performance.clearMarks('componentEnd');
    performance.clearMeasures('componentDuration');
  });
}

function loadResources(urls, callback) {
    // 模拟异步加载资源
    let loadedCount = 0;
    urls.forEach(url => {
        setTimeout(() => {
            loadedCount++;
            console.log(`Loaded: ${url}`);
            if (loadedCount === urls.length) {
                callback();
            }
        }, Math.random() * 1000); // 模拟不同资源的加载时间
    });
}

loadComponent();

第四部分：实际案例分析 – 从理论到实践，才是真本事！

光说不练假把式，咱们来看几个实际案例，看看 User Timing 和 Resource Timing 在实际项目中是如何应用的。

案例 1：优化图片加载

假设你的网站有很多图片，用户反馈说图片加载很慢。你可以使用 Resource Timing 找到加载慢的图片，然后：

压缩图片的大小
使用 WebP 格式
使用 CDN 加速
使用懒加载

通过这些优化，你可以显著提升图片的加载速度，改善用户体验。

案例 2：优化第三方库的加载

假设你的网站使用了大量的第三方库，用户反馈说网站打开很慢。你可以使用 Resource Timing 找到加载慢的第三方库，然后：

只加载需要的模块
使用 CDN 加速
使用 Tree Shaking 技术
延迟加载

通过这些优化，你可以减少第三方库的加载时间，提升网站的整体性能。

案例 3：监控用户交互的性能

假设你的网站有很多交互操作，用户反馈说有些操作很卡顿。你可以使用 User Timing 标记交互操作的开始和结束，然后分析时间差，找到性能瓶颈。例如：

document.getElementById('myButton').addEventListener('click', () => {
  performance.mark('buttonClickStart');

  // 执行一些操作
  doSomethingExpensive();

  performance.mark('buttonClickEnd');
  performance.measure('buttonClickDuration', 'buttonClickStart', 'buttonClickEnd');

  const measure = performance.getEntriesByName('buttonClickDuration')[0];
  console.log(`按钮点击事件执行时间：${measure.duration} ms`);

  performance.clearMarks('buttonClickStart');
  performance.clearMarks('buttonClickEnd');
  performance.clearMeasures('buttonClickDuration');
});

function doSomethingExpensive() {
  // 模拟耗时操作
  let sum = 0;
  for (let i = 0; i < 100000; i++) {
    sum += Math.random();
  }
}

第五部分：性能监控工具的集成 – 磨刀不误砍柴工！

User Timing 和 Resource Timing 只是工具，你需要把它们集成到性能监控工具中，才能更好地分析数据，发现问题。

有很多成熟的性能监控工具可以使用，例如：

Google Analytics
New Relic
Sentry
Lighthouse
WebPageTest

这些工具可以帮助你收集和分析性能数据，生成报告，并提供优化建议。

第六部分：总结 – 性能优化，永无止境！

今天咱们聊了 Performance API 里面的 User Timing 和 Resource Timing，希望你们能够掌握它们的使用方法，并在实际项目中应用。

记住，性能优化不是一蹴而就的事情，而是一个持续改进的过程。你需要不断地监控、分析、优化，才能让你的网站始终保持最佳状态。

表格总结：User Timing vs Resource Timing

特性	User Timing	Resource Timing
作用	测量自定义代码的执行时间	测量资源的加载时间
主要方法	`mark()`, `measure()`, `clearMarks()`, `clearMeasures()`	`getEntriesByType('resource')`
应用场景	监控函数执行时间、页面渲染关键步骤	分析 CDN 性能、优化图片大小、减少 HTTP 请求数量
注意事项	注意命名规范、及时清理标记、避免过度使用	需要服务器设置 `Timing-Allow-Origin` 头、注意性能开销

好了，今天的讲座就到这里，希望对大家有所帮助！记住，性能优化，你的KPI，你的命！祝大家早日成为性能优化大师！

发表回复 取消回复

发表回复取消回复