Javascript 动态css内容性能

我有一个requestAnimationFrame循环，需要将innerText设置为使用javascript测量的fps。我想知道是否有更有效的方法来做到这一点（因为我认为设置innerText会导致每个帧的回流/重新绘制）？对于fps来说，这可能不会对性能造成任何影响，但由于我想使用此机制添加/更改更多元素，我想知道是否有更有效的方法来实现这一点

我尝试更改css变量：

#fps counter:before{content:var（-css fps-var）}

并在循环中更改--css fps-var，但这不起作用。 现在我决定使用一个数据属性，我使用一个数据属性更新它：

#fps counter:before{content:attr（data fps）；}

我不知道这是否会更有效，我认为应该，但我只是不确定。。有更好的方法吗

编辑1：

---

不幸的是，我不能使用画布，我必须使用DOM元素来实现这一点。

在

中以文本形式绘制值不会触发DOM的任何布局/回流：

const times=[]；
让fps；
const canvas=document.getElementById（'fpsconter'）；
const ctx=canvas.getContext（'2d'）；
ctx.font='16px无衬线'；
函数refreshLoop（）{
window.requestAnimationFrame（（）=>{
const now=performance.now（）；
虽然（times.length>0&×[0]为什么不在
中显示该值？这不会触发布局或回流：对不起，忘了告诉im坚持使用DOM元素（也将用于不仅仅是FPS），编辑了这篇文章，提到了这一点！你需要在HTML元素中以纯文本形式打印fps值吗？因为实际上
是一个DOM元素。另外，你对允许使用的元素类型有限制吗？谢谢！这在fps计数器的情况下是有效的，但我可能还不够清楚，我还需要这个元素r具有特殊css样式的其他元素；效果和动画不容易用canvas:S复制