效率最高的滾動文本

Question

我需要儘可能平滑地創建非常高效的滾動文本。性能如此重要的原因是我也在同一時間從用戶的麥克風進行錄製。我已經試過兩件事情至今：

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

有兩個快速的解決方案，您可以嘗試：

1. 使用3D轉換強制現代瀏覽器使用GPU加速
2. 分割成塊的文字，只有動畫可見的單位，而不是整個事情。你的大塊應該是這樣的：[p1p2] [p2p3] [p3p4]等等，每個2頁。