根据整数值查找颜色 - 快速算法

我建立了一些应用程序，计算颜色的梯度取决于某些值。我用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 –

根据整数值查找颜色 - 快速算法

回答

相关问题