1

我需要尽可能流畅地创建 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 增加太多负载的情况下做到这一点？

4

1 回答 1

1

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

  1. 使用 3D 转换强制现代浏览器使用 GPU 加速
  2. 将您的文本分成几块，只为可见的块设置动画，而不是对整个内容进行动画处理。您的块应该是这样的：[p1p2] [p2p3] [p3p4] 等，每个 2 页。
于 2013-08-30T13:15:51.320 回答