javascript - 无需回流即可更改元素的宽度

Question

我有一个带有动画栏的音乐播放器，显示歌曲中的当前位置。它使用 requestAnimationFrame 呈现，并通过将 div 的 width 样式更改为 X% 来工作，其中 X 是当前歌曲的时间百分比。

我相信这会导致 Chrome 中的大量 CPU 使用，因为每一帧都在不断地进行回流工作。我可以使用哪些其他选项来消除回流并减少 CPU？

其他两个要求:此网页是后端音乐服务器上的网页用户界面。它没有使用任何 HTML5 媒体元素。因此，页面可能会在歌曲部分结束时加载，因此位置不会始终在 0 到 100 之间进行动画处理。

下面的 fiddle 在我的机器上显示了大约 30% 的 CPU，这似乎有点高，无法为矩形设置动画。

var pos = 0;
var s = document.getElementById('i');
f = function() {
  window.requestAnimationFrame(f);
  pos += .03;
  s.style.width = pos + '%';
}
f();

#i {
  background-color: red;
  position: absolute;
}

<div id="i">&nbsp;
</div>

Answer 1

有很多方法可以制作不会导致重新布局的纯 CSS 进度条，这里有几个例子:

1. 动画 - http://jsbin.com/yoqabe/edit?html,css,js,output

   我认为最有效的方法之一是使用动画来控制线性渐变的背景位置。唯一的缺点是您只能播放/暂停动画。

2. 背景位置 - 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