Question

我有一个小项目，我正在处理一个非常大的数组（1024项），从数组输出数据到doc上的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个项目长），循环设置div中存储的页面上1024个elems之一的高度，同时将其颜色设置为较大值的绿色，较低的值则设置为蓝色。 data内的值总是在0到255之间。每个animationFrame运行循环，我不能随着时间的推移逐段进行。数据必须现场更新。

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

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

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

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

Answer 1

我知道这本身并不是一个很好的答案，但我想在这里展示动画很快，而且不能在评论中这样做。

除了您要显示的代码之外，您的代码中可能还有其他内容。我掀起了这个小小的演示试图找到可能发生的事情，我经常得到~50fps（在Win 8.1的Chrome 51中）。它取决于您的DOM结构以及您同时在页面上发生的其他内容......

＆＃13;

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;

＆＃13;

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

＆＃13;

大数据的Javascript循环优化

1 个答案: