Изменить ширину элемента без перекомпоновки

Есть несколько способов сделать полосу прогресса на чистом CSS, которая не вызовет ретрансляции, вот несколько примеров:

1. animation – http://jsbin.com/yoqabe/edit?html,css,js,output

   Я думаю, что одним из наиболее эффективных способов было бы использование анимации для управления фоновым положением линейного градиента. Единственным недостатком является то, что вы можете только воспроизводить/приостанавливать анимацию.

2. background-position – http://jsbin.com/veyibe/edit?html,css,js,output

   Если вам нужна возможность обновить позицию с помощью JS, то я бы предложил обновить background-position градиента и применить переходы CSS, устраняя дребезг, чтобы избежать слишком быстрого обновления.

3. translateX: http://jsbin.com/zolurun/edit?html,js,output

   Вы также можете использовать преобразования CSS для перемещения индикатора выполнения внутри контейнера, что также должно избежать перерисовки.

Эти ссылки также могут быть полезны:

• Список макетов CSS, рисунков и составных триггеров: http://csstriggers.com
• Информация об отказе: https://davidwalsh.name/javascript-debounce-function

Вы можете рассмотреть возможность использования других свойств CSS, которые не требуют операций с макетом, таких как background-size.

И используйте анимацию CSS вместо requestAnimationFrame.

var bar = document.getElementById('i');
function playSong(currentTime, duration) {
  bar.style.animationDuration = duration + 's';
  bar.style.animationDelay = - currentTime + 's';
}
playSong(3, 10);

#i {
  height: 1em;
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
  animation: bar linear;
}
@keyframes bar {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

<div id="i"></div>

Если вы используете position: absolute или position: fixed на самом индикаторе выполнения, это должно предотвратить большие перекомпоновки на странице.

Используйте timeupdate. Время, указанное атрибутом currentTime элемента, изменилось. .

Попробуй это:

var audio = document.getElementById("audio");

function updateProgress() {
  var progress = document.getElementById("progress");
  var value = 0;
  if (audio.currentTime > 0) {
    value = Math.ceil((100 / audio.duration) * audio.currentTime);
  }
  progress.style.width = value + "%";
}


audio.addEventListener("timeupdate", updateProgress, false);

#progressBar {
  border: 1px solid #aaa;
  color: #fff;
  width: 295px;
  height: 20px;
}
#progress {
  background-color: #ff0000; // red
  height: 20px;
  display: block;
  height: 100%;
  width: 0;
}

<div id="progressBar"><span id="progress"></span>
</div>
<audio id="audio" controls>
  <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
  <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg" />Your browser does not support the audio element.
</audio>

Сценарий, который вы представляете, не очень соответствует тому, который вы хотите, вы анимируете requestAnimationFrame, но на самом деле вы будете анимировать каждый раз, когда изменяется «процент песни».

Предполагая, что у вас есть функция (например, getSongPer()), которая возвращает текущий процент воспроизведенной песни:

var oldPos, pos = 0;
var s = document.getElementById('i');
f = function() {
  oldPos = pos;
  pos = getSongPer();
  if(oldPos !== pos){
    s.style.width = pos + '%';
  }
  if(pos<100){
    window.requestAnimationFrame(f);
  }
}
f();

Я не тестировал его, но ожидаю, что он будет легче, кроме того, на производительность будет влиять точность процента, например. будет около 100 изменений анимации, если у вас есть нулевая точность цифр, и примерно в десять раз больше для каждой цифры после.

CSS:

#progress-bar {
  background-color: red;
  height: 10px;
  width: 100%;
  transform-origin: 0 0;
}

JS:

'use strict'

var progressBar = document.getElementById('progress-bar')

function setProgress(percentage) {
  requestAnimationFrame(function () {
    progressBar.style.transform = 'scaleX(' + percentage + '%)'
  })
}

setProgress(10)

При установке ширины на 100% вы получаете цветную полосу полной ширины.

Затем мы можем применить масштабное преобразование, чтобы установить ширину полосы без перекомпоновки.

Но о, он масштабируется до середины. Мы можем исправить это, установив начало преобразования в верхний левый угол, используя transform-origin: x y, где x и y равны 0.

Затем мы оборачиваем изменение стиля в requestAnimationFrame, чтобы позволить браузеру оптимизировать применение изменения.

Бам! У вас есть эффективная полоса прогресса нулевого перекомпоновки.