大數據的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>