根據整數值查找顏色 - 快速算法

我建立了一些應用程序，計算顏色的梯度取決於某些值。我用d3.js來計算顏色，但是我認識到這個函數真的很慢 - 它在80ms內執行（執行這個函數的次數是40.000次）。這對我來說很重要（我多次使用）根據整數值查找顏色 - 快速算法

var findColor = d3.scaleLinear().domain([0,10,20,30,40,50,60,70,80,90,100,110]).range(['#a50026 ','#d73027 ','#f46d43 ','#fdae61 ','#fee08b ','#ffffbf ','#d9ef8b ','#a6d96a ','#66bd63 ','#1a9850 ','#006837 ','#006837 ']);

你能告訴我什麼是更好的解決方案嗎？我需要更快的想法。

帶50個盒子的開關會更好，更快嗎？

來源

2016-08-14 Maciej Wójcik

看看這個小提琴：https：//jsfiddle.net/xrjwmnbL/3/我做了一些測試，但結果是太好了，以至於不真實;您可能想要在應用程序中，在真實情況下，用真實數據對其進行測試。 – Thomas

（邊緣速度提高3倍，熱身後，FF && Chrome：O速度提高10-20倍）恐怕，這可能只是基準測試的一些巧妙優化的結果。 – Thomas

@Thomas你的jsfidle真棒。謝謝，你的幫助。在「回答」中加入這個，所以我可以接受這個 –

那麼，不要認爲使用現代瀏覽器的體面的計算機將需要80毫秒來執行該功能。

這是不是答案（在我不提供任何更快的替代方法的意義上），但我不得不寫它作爲答案，因爲我想使用片段（我不能在一個評論）來顯示你的功能有多快：

在下面的代碼片段中，這個函數被執行10000次。在我的（相當古老的）電腦中，使用Chrome瀏覽器，運行所有循環需要21ms。點擊「運行代碼片段」進行檢查。

var t1 = performance.now() 
 

 
var findColor = d3.scaleLinear() 
 
    .domain([0,10,20,30,40,50,60,70,80,90,100,110]) 
 
    .range(['#a50026 ','#d73027 ','#f46d43 ','#fdae61 ','#fee08b ','#ffffbf ','#d9ef8b ','#a6d96a ','#66bd63 ','#1a9850 ','#006837 ','#006837 ']); 
 

 
for(var i = 0; i < 10000; i++){ 
 
findColor(Math.random()*110) 
 
} 
 

 
var t2 = performance.now() 
 

 
console.log("Time: " + (t2 - t1) + " miliseconds");

<script src="https://d3js.org/d3.v4.min.js"></script>

注意：在OP編輯的問題，並解釋說80毫秒指的40000倍。這與上面的片段循環40000次大致相同。

來源

2016-08-14 12:52:02

我點擊它幾次，迄今爲止的記錄是這個10000x循環18ms。最糟糕的時間是40毫秒。 –

那麼，你有它。它已經很快了。那麼如何讓80毫秒運行一次呢？ – Ouroborus

我有80ms運行它約4000 * 50所以200000 –

根據整數值查找顏色 - 快速算法

回答

相關問題