大数据的Javascript循环优化

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个项目长度），循环设置存储在elems的页面上1024个div之一的高度，同时将其颜色设置为更大的绿色以获得更大的值，等等蓝色表示较低的值。 data内部的值总是在0到255之间。循环在每个animationFrame中运行，我无法随时间推移。 数据必须实时更新。

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

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

如果有帮助，我正在使用新的谷歌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>