Javascript 导致布局抖动的SVG文本元素

我在网页上放置了大量svg文本元素，文本内容会随着偏移量变量的变化（请参见下面的代码）在滚动时使用vue.js动态更新。此更新导致布局抖动，我无法解决此问题。我的所有元素都是使用css绝对定位和调整大小的。如何防止布局重新计算

我已尝试将文本呈现属性设置为optimiseSpeed。我曾尝试将visiblity设置为hidden，并通过javascript修改每个文本元素的文本节点，然后将visibility设置为visible，但仍然会导致布局混乱。我还尝试将textLength设置为固定大小

<svg class=svg :viewBox="viewBox" preserveAspectRatio="none">
   <g text-anchor="end">
      <text v-for="index in tickCount" :key=index  width=2 height=1
            :x="width/2"
            :y="index + 1"
            >{{index + offSet}}m</text>
   </g>
</svg>

{{index+offSet}}m

---

Chrome性能工具显示布局占用大量时间并将FPS丢弃到您是否使用Vue？是的，更新了问题。您多久动态更新一次scroll？每个scroll事件更新一次偏移量变量，导致所有文本元素更新。一个快速测试显示我的鼠标滚动事件每20-60毫秒触发一次。有必要经常更新吗？还有，我们在这里讨论多少文本元素？