Самый эффективный текст прокрутки

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)"; 

Это менее суровые производительности (и намного более гладкое, так как это может сделать движение субпикселей), но она по-прежнему вызывает значительные ошибки в записи на некоторых компьютерах, особенно те, с бортовым видео.

Есть ли способ сделать это без большой нагрузки на процессор?

Answer 1

Есть два быстрых решения, которые вы можете попробовать:

1. Использование 3D-преобразования, чтобы заставить современные браузеры использовать ускорение GPU
2. Разделите текст на куски и только анимировать видимые куски, а все это , Ваши куски должны быть примерно такими: [p1p2] [p2p3] [p3p4] и т. Д., По 2 страницы.