动态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); }

我不知道这样做是否会更出色，我认为应该，但是我不确定。.还有更好的方法吗？

edit1：

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

解决方法

在<canvas>中以文本形式绘制值不会触发DOM的任何布局/重排：

const times = [];
let fps;
const canvas = document.getElementById('fpsCounter');
const ctx = canvas.getContext('2d');
ctx.font = '16px sans-serif';

function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now();
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift();
    }
    times.push(now);
    fps = times.length;
    ctx.fillStyle = '#000000';
    ctx.fillRect(0,canvas.width,canvas.height);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(`fps: ${fps}`,10,16);
    refreshLoop();
  });
}

refreshLoop();

<canvas id="fpsCounter" width="100" height="20" style="position: absolute; top: 10px; left: 10px;"/>