Highcharts由于“重新计算风格”和“布局”而导致可怕的表现

Question

很多类似的问题，但没有明确的答案。

• Highcharts treemap slow rendering upon drilldown
• Recalculate Style: why so stuttering?

我以前约慢高图表普遍的问题，但这个问题是更具体。

• Highcharts is much slower rendering a chart after building object vs manually coding same object

当铬 “时间线” 的渲染过程中寻找有1000年代：

• “重新计算样式（highcharts.js：52）”
• “布局（highcharts.js：52）“

每一次都在而我会找到一个没有任何一个的图表，而且表现很棒。也因为Safari的原因似乎没有任何性能问题。

我对highcharts使用以下选项，也尝试了boost.js但没有成功。

console.time('Creating Initial Graph'); 
      // Create Graphs 
      $('#cpuGraph').highcharts({ 

       chart: { 
        type: 'line', 
        //zoomType: 'x', 
        animation: false, 
        shadow: false 
       }, 
       plotOptions: { 
        line: { 
         enableMouseTracking: true, 
         dataLabels: { 
          enabled: false 
         }, 
         animation: false, 
         marker: { 
          enabled: false 
         }, 
         turboThreshold: 100 
        } 
       }, 
       tooltip: { 
        animation: false, 
        crosshairs: true, 
        shared: true, 
        valueSuffix: '%', 
        backgroundColor: null, 
        borderWidth: 0, 
        shadow: false, 
        useHTML: true, 
        style: { 
         padding: 0 
        } 
       }, 
       xAxis: { 
        categories: times 
       }, 
       yAxis: { 
        max: 100, 
        min: 0 
       }, 
       title: { 
        text: 'Trimmed Highcharts drawing points' 
       }, 

       subtitle: { 
        text: 'Using the experimental Highcharts Boost module' 
       } 



      }); 
      console.timeEnd('Creating Initial Graph'); 

      console.time('Converting Data Array to Chart Object'); 
      var newSeries = []; 
      for (i = 0; i < servers.length; i++) { 
       var seria = {}; 
       seria['name'] = servers[i]; 
       seria['data'] = cpuArray[i]; 
       newSeries.push(seria); 
      } 
      console.timeEnd('Converting Data Array to Chart Object'); 

      console.time('Creating chart variable'); 
      var chart = $('#cpuGraph').highcharts(); 
      console.timeEnd('Creating chart variable'); 

      console.time('Adding All Chart Objects to Chart'); 
      $.each(newSeries, function(i){ 
       console.time("Adding series: " + i); 
       chart.addSeries(newSeries[i], false); 
       console.timeEnd("Adding series: " + i); 
      }); 

      chart.redraw(); 
      console.timeEnd('Adding All Chart Objects to Chart'); 

典型时序：

:232 Creating Initial Graph: 778.805ms 
:242 Converting Data Array to Chart Object: 0.029ms 
:252 Adding series: 0: 1.698ms 
:252 Adding series: 1: 0.412ms 
:252 Adding series: 2: 0.227ms 
:252 Adding series: 3: 0.188ms 
:252 Adding series: 4: 0.140ms 
:252 Adding series: 5: 0.123ms 
:252 Adding series: 6: 0.110ms 
:254 Adding All Chart Objects to Chart: 3.374ms 
:258 Redraw chart with all objects: 9084.491ms 

Answer 1

使用boost.js模块，以提高highcharts性能。请参考highcharts-performance-boost