使用Performance API测量CSS动画性能时duration值异常大怎么办？

我之前踩过这个坑，这个问题其实挺常见的。你遇到的duration值异常大的问题，主要是因为CSS动画的生命周期和Performance API的测量时机对不上导致的。

CSS动画不仅仅是你在keyframes里定义的时间那么简单，它还包含了浏览器内部的一些处理阶段，比如样式计算、布局、绘制、合成等。尤其是当动画涉及到复合层的时候，这些额外的开销都会被performance.measure()给算进去。所以哪怕你的动画只有2秒，实际测量到的时间可能会包含其他隐性开销。

解决这个问题的办法有几个。首先，你可以尝试用更精确的工具来测量动画性能，比如Chrome DevTools里的Performance面板或者Rendering标签页。这些工具可以帮你区分出真正的动画时间和其他渲染开销。

其次，如果你非要用Performance API，建议把测量的范围缩小到具体的动画阶段。比如，在动画开始前打一个mark，在动画结束后再打一个mark，但这里的“动画结束”不要依赖于animationend事件，而是通过requestAnimationFrame来更精确地控制。

下面是一个代码示例：

const element = document.querySelector('.animated-element');



// 在动画开始前打点

performance.mark('animation-start');



// 使用 requestAnimationFrame 确保测量时机准确

let startTime;

function measureAnimation(timestamp) {

  if (!startTime) {

    startTime = timestamp;

  }

  const progress = timestamp - startTime;

  if (progress < 2000) { // 动画时长是2秒

    requestAnimationFrame(measureAnimation);

  } else {

    // 动画结束时打点

    performance.mark('animation-end');

    performance.measure('animation-duration', 'animation-start', 'animation-end');

    const measures = performance.getEntriesByName('animation-duration');

    console.log(动画真实耗时: ${measures[0].duration}ms);

  }

}



requestAnimationFrame(measureAnimation);

最后还有一个小细节要注意：你提到的will-change确实能优化渲染性能，但它并不能完全避免一些隐性的合成开销。如果你发现动画性能还是有问题，可以检查一下是否触发了重绘或者回流，尤其是在动画元素的父级或者子级上。

总结一下，关键点就是缩小测量范围，避免混入其他渲染开销，同时用更精确的工具辅助分析。希望这些建议能帮你解决问题！

这个问题其实挺常见的，主要是因为Performance API测量的时间和CSS动画的实际执行时间并不是一回事。咱们先分析一下原因。

当你用 performance.mark() 和 performance.measure() 测量时，它记录的是你标记的时间点之间的差值，而不是CSS动画本身的精确执行时间。CSS动画的渲染是由浏览器的合成线程控制的，而Performance API记录的是主线程上的时间点。如果你的页面有其他任务阻塞了主线程（比如JavaScript执行、布局计算、重绘等），这些都会影响到测量结果。

另外，will-change 虽然能优化某些性能问题，但它并不能保证动画完全脱离主线程运行。如果动画触发了布局抖动或者重绘，那测量的时间自然会变长。

解决方法可以这样试试：

第一，确保你的动画只涉及 transform 和 opacity 这种不影响布局的属性，因为你已经在用 will-change: transform;，这点是正确的。不过要检查一下，页面上有没有其他样式导致意外的重排或重绘。

第二，尝试在动画开始和结束的地方使用 requestAnimationFrame 来插入标记点。比如这样：

const element = document.querySelector('.animated-element');



// 动画开始前打点

performance.mark('animation-start');



element.addEventListener('animationstart', () => {

  performance.mark('css-animation-start');

});



element.addEventListener('animationend', () => {

  performance.mark('css-animation-end');

  performance.measure('css-animation-duration', 'css-animation-start', 'css-animation-end');

  

  const measures = performance.getEntriesByName('css-animation-duration');

  console.log(measures[0].duration); // 查看实际测量时间

});

通过监听 animationstart 和 animationend 事件，你可以更准确地获取动画的真实执行时间，而不是依赖手动标记的时间点。

第三，用浏览器的开发者工具（比如Chrome DevTools）的Performance面板跑一下性能分析，看看有没有其他任务阻塞了主线程。有时候你会发现一些意料之外的脚本执行或者样式计算。

最后，如果你发现动画还是慢，可能是硬件加速没生效。可以强制开启GPU加速，比如给元素加上 transform: translateZ(0);，但这通常只是锦上添花，治标不治本。

总之，Performance API适合用来测量JavaScript代码的执行时间，而对于CSS动画，建议结合事件监听和开发者工具来分析性能问题。希望这些建议能帮你找到问题的根源。