Как перемещать элементы страницы, не вызывая перерисовку?

В настоящее время я пытаюсь выяснить, как я могу перемещать элементы (в произвольное положение) на веб-страницу, не вызывая перерисовки содержимого (и, следовательно, не хватает бюджета 60 кадров в секунду).Как перемещать элементы страницы, не вызывая перерисовку?

Мой подход состоял в том, чтобы использовать transform: translate(...), поскольку состав будет выполнен на графическом процессоре и не нуждается в каких-либо перекрашиваниях содержимого. Тем не менее, когда я изменяю свойство transform, элемент будет перерисован.

Я создал пример для этого случая:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
     #moving { 
      transform: translate(0, 0); 
      width: 100px; 
      height: 100px; 
      background-color: red; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script> 
</head> 
<body> 
<div id="moving"></div> 
<script> 
    setTimeout(function() { 
     $('#moving').css('transform', 'translate(100px, 100px)'); 
    }, 2000); 
</script> 
</body> 
</html>

источник

2013-07-30 David

Мой первый вопрос будет? Почему бы вам не перекрасить его? Вам понадобится перекраска, чтобы увидеть ход, не так ли? – GolezTrol

Что вы думаете * перекрашивание * означает? – Mics

Рецензии представляют значительное время рисования, и мне нужно переместить много контента, но это не изменилось каким-либо другим способом. – David

вы можете использовать CSS ключевые кадры для этого

http://jsfiddle.net/9yqWY/

#moving { 
    animation: move 2s infinite; 
    -webkit-animation: move 2s infinite; 
    width: 100px; 
    position:relative; 
    height: 100px; 
    background-color: red; 
} 
@keyframes move { 
    0 { 
     transform: translate(0); 
     -webkit-transform: translate(0); 
     -moz-transform: translate(0); 
    } 
    50% { 
     transform: translate(100px); 
     -webkit-transform: translate(100px); 
     -moz-transform: translate(100px); 
    } 
    100% { 
     transform: translate(0); 
     -webkit-transform: translate(0); 
     -moz-transform: translate(0); 
    } 
} 
@-webkit-keyframes move { 
    0 { 
     transform: translate(0); 
     -webkit-transform: translate(0); 
     -moz-transform: translate(0); 
    } 
    50% { 
     transform: translate(100px); 
     -webkit-transform: translate(100px); 
     -moz-transform: translate(100px); 
    } 
    100% { 
     transform: translate(0); 
     -webkit-transform: translate(0); 
     -moz-transform: translate(0); 
    } 
}

источник

2013-07-30 08:52:32 Hushme

Благодарим вас за ответ. Я думаю, что я не совсем понял, что я имел в виду. Мне нужно переместить содержимое в указанную пользователем позицию. Таким образом, невозможно заранее определить ключевые кадры. Я пытался генерировать ключевые кадры на лету, но в тот момент, когда я вставляю правило, страница перекрашивается. – David

Repaint не является злом. Это необходимая операция для обновления изображения на дисплее. Современные браузеры довольно умны, чтобы перекрасить наименьшую требуемую область. В вашем примере для выполнения задания Chrome требуется только 0,18 мс.

Developer Tools screenshot shows repaint

Как управляемый элемент стал больше, перекрашивать займет больше времени, но все-таки разумное количество времени (в большинстве случаев). Он мог стал более дорогостоящим, если он запускается много раз подряд (например, с помощью анимации JavaScript/jQuery).

источник

2013-07-30 09:06:56 Pavlo

К сожалению, именно это происходит. Я пропускаю свой бюджет в 60 кадров в секунду при программном переходе больших элементов по экрану. – David

Вы используете переход или анимацию? Если вы этого не сделаете (например, перемещение выполняется сразу, как в примере), вы можете позволить себе более 16 мс, задержка не будет заметна. – Pavlo

У меня две ситуации: один - это панорамирование в стиле Google, а второе - анимация, которая запускается в некоторых особых случаях. Специально для панорамирования я хотел бы не сломать 16 мс, так как есть другие асинхронные вещи, которые могут еще больше задержать рамки. – David

Как перемещать элементы страницы, не вызывая перерисовку?

ответ

Смежные вопросы