性能關注的Javascript

存儲在大的陣列的數據時，我有一個基於瀏覽器的可視化應用程序，其中有數據點的圖表，存儲作爲對象的數組：性能關注的Javascript

data = [ 
    {x: 0.4612451, y: 1.0511} , 
    ... etc 
]

此圖是visualized with d3 and drawn on a canvas（看到這個問題進行有趣的討論）。它是交互式的，尺度可以改變很多，這意味着數據必須重新繪製，並且需要頻繁迭代數組，特別是在動畫縮放時。

從我的腦海和閱讀其他Javascript帖子，我有一個模糊的想法，優化JavaScript中的解除引用可以導致性能大大提高。 Firefox是我的應用運行速度非常慢的唯一瀏覽器（與IE9，Chrome和Safari相比），並且需要改進。因此，我想站穩，權威的答案如下：

慢多少是這樣的：

// data is an array of 2000 objects with {x, y} attributes 
var n = data.length; 
for (var i=0; i < n; i++) { 
    var d = data[i]; 
    // Draw a circle at scaled values on canvas 
    var cx = xs(d.x); 
    var cy = ys(d.y); 
    canvas.moveTo(cx, cy); 
    canvas.arc(cx, cy, 2.5, 0, twopi); 
}

相比，這樣的：

// data_x and data_y are length 2000 arrays preprocessed once from data 
var n = data_x.length; 
for (var i=0; i < n; i++) { 
    // Draw a circle at scaled values on canvas 
    var cx = xs(data_x[i]); 
    var cy = ys(data_y[i]); 
    canvas.moveTo(cx, cy); 
    canvas.arc(cx, cy, 2.5, 0, twopi); 
}

xs和ys是D3規模對象，它們是計算縮放位置的函數。我在上面提到，上面的代碼可能需要運行到60幀每秒和可以滯後像火球上的球。據我所見，唯一的區別是數組解引用vs對象訪問。哪一個運行速度更快，差異顯着？

來源

2013-03-26 Andrew Mao

您應該在[jsperf]（http://jsperf.com/）上對其進行測試，儘可能多地使用瀏覽器。在另一個上最快的可能不是最快的（例如，遞減循環比在大多數瀏覽器中增加循環要快一些，除了Opera，它們相當慢），所以你可能需要妥協。 – RobG 2013-03-27 00:01:19

'd'，'cx'，'cy'的一些'var'聲明可能？在「*哪一個跑得快*」：你只能[測試，測試，測試]（http://jsperf.com/） – Bergi 2013-03-27 00:01:48

對不起，從coffeescript翻譯錯誤。我的世界沒有變數。修正並感謝。 – 2013-03-27 00:02:29

這些循環優化中的任何一個都不會有什麼不同。通過這樣的循環2000次並不多。

我傾向於懷疑在Firefox中緩慢實施canvas.arc()的可能性。您可以用我在PolyGonzo地圖中使用的電話代替canvas.lineTo()呼叫，我知道這個呼叫在Firefox中速度很快。在該頁面的測試地圖上的「所有3199縣」視圖繪製了3357個多邊形（一些縣有多個多邊形），總共有33,557個點，並且通過類似的畫布循環遍歷每個點。

來源

2013-03-27 00:03:27

我正在畫一個圓，所以我不確定'canvas.lineTo（）'會如何幫助。 – 2013-03-27 00:04:39

這是一個縮小問題的測試。 'canvas.lineTo（）'不會幫你繪製一個圓圈。它將幫助您瞭解是否在試圖優化循環結構時吠叫錯誤的樹。如果在使用'canvas.lineTo（）'的時候得到了很多快，那麼你知道問題出在Firefox的'canvas.arc（）'實現中。相反，如果它仍然與'.lineTo（）'一樣慢，那麼你知道我對'.arc（）'的懷疑是錯誤的。也就是說，它可能無法幫助你加快速度，但它會幫助你知道問題出在哪裏。 – 2013-03-27 00:11:49

是的，你是對的。它是'canvas.arc（）'。 >。 2013-03-27 00:15:48

感謝JsPerf的建議，我實施了一個快速測試。我會很感激任何人在這裏添加他們的結果。

http://jsperf.com/canvas-dots-testing：結果的13年3月27日：到目前爲止

enter image description here

我觀察到以下幾點：

無論數組或對象是更好似乎依賴於瀏覽器，和操作系統。例如，Chrome在Linux上的速度相同，但Windows中的對象速度更快。但是對於很多人來說他們幾乎是一樣
Firefox只是一羣烏龜，這也有助於證實Michael Geary的假設，即它的canvas.arc()只是超級慢。

來源

2013-03-27 00:38:01

性能關注的Javascript

回答

相關問題