时间戳

首页 > 解决方案 > 浏览器调整大小时如何优化d3js响应条形图中的cpu消耗

javascript - 浏览器调整大小时如何优化d3js响应条形图中的cpu消耗

问题描述

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

我删除了一些浮点变量

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;});
}

它可以正常工作

标签： javascriptbrowser

解决方案

感谢 Yaelet，阅读这篇文章我发现了如何在调整浏览器大小时最小化 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 的影响。

推荐阅读