Question

我需要尽可能顺利地创建非常高效的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带来太多负担的情况下做到这一点？

Answer 1

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

使用3D转换强制现代浏览器使用GPU加速
以块的形式分割文本，只为可见的块设置动画，而不是整个动画。你的块应该是这样的：[p1p2] [p2p3] [p3p4]等，每页2页。

最有效的滚动文字

1 个答案: