Question

我写了一些代码来做响应式条形图，但是当我调整浏览器大小时，CPU消耗很高。我该如何优化代码以减少使用cpu的难度？

我删除了一些float变量

window.onload = window.onresize = function()
{
    ancho = d3.select(svg).node()._groups[0][0].clientWidth;
    largo = d3.select(svg).node()._groups[0][0].clientHeight;

    if((rango[0]*multiplicador) > largo)
    {
        multiplicador = multiplicador/2;
        console.log(multiplicador+' > '+largo);
    }
    else
    {
        if((rango[0]*multiplicador) < largo-50)
        {
            multiplicador = multiplicador+multiplicador/2;
            console.log(multiplicador+' > '+largo);
        }
    }

    svg.selectAll('rect').remove();
    svg.selectAll('rect')
    .data(datos)
    .enter()
    .append('rect')
    .attr('fill','blue')
    .attr('stroke','red')
    .attr('x',          function(data, index){return ((ancho/(datos.length))*index) + espaciado;})
    .attr('y',          function(data, index){return (largo)-(data*multiplicador);})
    .attr('width',      function(data, index){return (ancho/datos.length)-espaciado;})
    .attr('height',     function(data, index){return data*multiplicador;});
}

它可以正常工作

Answer 1

感谢Yaelet，阅读此article，我发现调整浏览器大小时如何最大程度地降低cpu消耗：

1。节流： 图表不会在每次浏览器调整大小事件时都会调整大小，通过超时，我可以设置要跳过的毫秒数。

window.addEventListener('resize', function() {
    // only run if we're not throttled
  if (!throttled) {
    // actual callback action
    getDimensions();
    // we're throttled!
    throttled = true;
    // set a timeout to un-throttle
    setTimeout(function() {
      throttled = false;
    }, delay);
  }  
});

2。反跳： 该图表仅在窗口调整大小完成时才调整大小。

window.addEventListener('resize', function() {
    // clear the timeout
  clearTimeout(timeout);
  // start timing for event "completion"
  timeout = setTimeout(getDimensions, delay);
});

最后，我希望阅读一些其他提示，以减少调整窗口大小时对cpu的影响。

当浏览器调整大小时，如何优化d3js响应条形图中的cpu消耗[已解决]

1 个答案: