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页。

关于javascript - 最有效的滚动文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18533077/