Javascript 最有效的滚动文本

我需要创建非常CPU效率的滚动文本尽可能顺利。性能如此关键的原因是我同时也在从用户的麦克风录音。到目前为止，我已经尝试了两件事：

scroller = setInterval(scroll_words, 100);

function scroll_words ()
{
   var words= document.getElementById("words");
   var speed = document.getElementById("word_speed").value;
   var total_height = word.children.length * 18;
   words.scrollTop += 0.1 * 18 * speed;
}

这一个明显是起伏的，它会导致记录中的重大错误（跳过或空白点）。这是我的第二次尝试：

var words = document.getElementById("words");
var speed = document.getElementById("word_speed").value;
words.style.webkitTransition = ((18 * words.children.length)/speed)+"s all linear";
words.style.webkitTransform = "translate(0px, -"+(18 * words.children.length)+"px)";

这对性能来说不太苛刻（而且更平滑，因为它可以进行亚像素移动），但在某些计算机上，尤其是带有车载视频的计算机上，它仍然会导致明显的录制错误

---

有没有一种方法可以在不增加CPU负载的情况下实现这一点？

有两种快速解决方案可供您尝试：

使用3D转换强制现代浏览器使用GPU加速

将文本拆分为块，只对可见的块设置动画，而不是对整个内容设置动画。你的区块应该是这样的：[p1p2][p2p3][p3p4]等等，每个2页

---

您可以尝试两种快速解决方案：

使用3D转换强制现代浏览器使用GPU加速

将文本拆分为块，只对可见的块设置动画，而不是对整个内容设置动画。你的区块应该是这样的：[p1p2][p2p3][p3p4]等等，每个2页

---

看起来，3D变换做到了这一点。如果我以后有问题，我会尝试第二个建议，但第一个建议似乎已经足够了。3D转换确实做到了，看起来。如果我以后有问题，我会尝试第二个建议，但第一个似乎已经足够了。