가장 효율적인 스크롤 텍스트

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

이 빠른 해결책이 있습니다 당신은 시도 할 수 있습니다 :

1. 를 사용하여 3D 변환을 대신 모든 일의, GPU 가속
2. 를 사용하는 최신 브라우저를 강제 덩어리에 텍스트를 분할 만 볼 덩어리 애니메이션 . 당신의 덩어리는 [p1p2] [p2p3] [p3p4] 등 2 페이지가되어야합니다.