Chrome DevTools 的 Rendering 面板怎么不显示 FPS 和 Paint Flashing？
我最近在优化一个 Vue 组件的动画性能，想用 Chrome DevTools 里的 Rendering 面板看下 FPS 和开启 Paint Flashing，但点了之后完全没反应，FPS 图表是空的，页面也没有绿色闪烁。
我已经确认是在最新版 Chrome（124+），也试过重启 DevTools 和刷新页面，还是不行。是不是我的代码写法有问题？比如用了 transform 导致没触发重绘？
<template>
<div class="box" :style="{ transform: translateX(${x}px) }"></div>
</template>
<script setup>
import { ref } from 'vue'
const x = ref(0)
setInterval(() => {
x.value = (x.value + 1) % 300
}, 16)
</script>
<style scoped>
.box {
width: 50px;
height: 50px;
background: red;
will-change: transform;
}
</style>1 条解答
其次，检查一下是否有其他扩展或设置影响了 DevTools 的功能。有时候某些插件会干扰调试工具的表现。
你的代码逻辑看起来没问题，使用 transform 是个很好的选择，能避免布局重排。不过，
setInterval可能不够精确，建议使用requestAnimationFrame来替代，这样能更好地与浏览器的刷新频率同步。尝试一下这个改版的代码：
记得在 Rendering 面板里启用相应的选项，然后看看是否能正常显示 FPS 和 Paint Flashing。如果问题依旧，可能需要清除浏览器缓存或者试试无痕模式，排除其他干扰因素。