大数据的 Javascript 循环优化

Question

我正在处理一个小项目，它处理一个非常大的数组（1024 个项目），将数组中的数据输出到文档上的 1024 个单独元素（是的，我尝试了画布，但它们太模糊了对于我正在做的事情）。

我需要的是尽可能优化这个循环的方法。

for(var i = 0; i < 1024; i++){
    elems[i].style.height = data[i] + 'px';
    elems[i].style.backgroundColor = 'rgb(0,' + data[i] + ',' + (255 - data[i]) + ')';
}

对于数组data 中的每个项目，它总是1024 个项目，循环设置存储在elems 中的页面上的1024 个div 之一的高度，并将其颜色设置为值越大越绿，值越低越蓝。 data 中的值始终介于 0 到 255 之间。循环在每个 animationFrame 运行，我不能让它随着时间的推移分段进行。数据必须实时更新。

我的主要问题是运行循环会输出非常低的 FPS 计数，通常约为 15fps。我的问题是：

我可以通过哪些方式优化上面的循环以尽可能快地运行？每个渲染帧都会实时更新数据。我将高 FPS 作为我的主要目标。这可能吗？

如果有帮助，我正在使用新的 Google Chrome 音频分析器制作音乐可视化工具。

我也可以在将来需要处理或显示非常大的数据集时看到这方面的帮助。每种方法，即使在很大程度上不可读（这就是 /*comments*/ 的用途），都有帮助！

Answer 1

我知道这本身并不能很好地回答，但我想在这里展示动画非常快，并且不能在评论中这样做。

除了您显示的代码之外，您的代码中可能还有其他内容。我制作了这个小演示来尝试了解可能发生的情况，并且我通常会获得大约 50fps（在 Win 8.1 上的 Chrome 51 中）。它确实取决于您的 DOM 结构以及您同时在页面上进行的其他操作...

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var start;

function updatePositions(timestamp) {
  var container = document.getElementById('container');
  var elems = container.children;
  for (var i = 0; i < 1024; i++) {
    var itemValue = getRandomInt(0, 255);
    elems[i].style.height = itemValue + 'px';
    elems[i].style.backgroundColor = 'rgb(0,' + itemValue + ',' + (255 - itemValue) + ')';
  }
  start = start || timestamp;
  var duration = timestamp - start;
  if (duration < 5000) {
    window.requestAnimationFrame(updatePositions);
  }
}

function initialize() {
  var items = [];
  for (var i = 0, z = 1024; i < z; i++) {
    items.push('<div id="item' + i + '">' + i + '</div>');
  }
  container.innerHTML = items.join('');
  window.requestAnimationFrame(updatePositions);
}

window.onload = initialize;

<div id="container">
</div>