php: laravel медленный просмотр времени рендеринга при рендеринге javascript для highcharts

Question

У меня странная проблема на веб-сайте, который я создаю. На странице, у которой есть проблема, я использую несколько highcharts. Все работает нормально, но время рендеринга слишком велико (около 5 секунд).

Когда я проверить его в хроме, я вижу что-то вроде этого:

В 8 сценариев для Highcharts находятся в красной коробке. Понятно, что проблема в этом.

Чтобы отобразить сценарии для высоких диаграмм (javascript), я создал контроллер и виды. Я использую их в шаблоне таким образом:

{{ Html::script(url ('/highchart/gauge', [$humidityInside->sd_value , 'humidityInside', 'Luchtvochtigheid binnen','%',0,100,'#55BF3B','#DDDF0D','#DF5353'])) }} 

и в контроллере highchart я просто отправить переменную в целях:

public function gauge($value,$divname,$chartTitle,$suffix,$minValue,$maxValue,$colorMin,$colorMed,$colorMax) 
     { 
      return view('highchart.gauge')->with(compact('value' , 'divname','chartTitle','suffix','minValue','maxValue','colorMin','colorMed','colorMax')); 
     } 

мнение, то просто придающей JavaScript, вкладывая в переменных в нужном месте:

$(function() { 

    var gaugeOptions = { 

     chart: { 
      type: 'solidgauge' 
     }, 

     title: null, 

     pane: { 
      center: ['50%', '85%'], 
      size: '140%', 
      startAngle: -90, 
      endAngle: 90, 
      background: { 
       backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', 
       innerRadius: '60%', 
       outerRadius: '100%', 
       shape: 'arc' 
      } 
     }, 

     tooltip: { 
      enabled: false 
     }, 

     // the value axis 
     yAxis: { 
      stops: [ 
       [0.1, '{{ $colorMin }}'], // green 
       [0.8, '{{ $colorMed }}'], // yellow 
       [0.9, '{{ $colorMax }}'] // red 
      ], 
      lineWidth: 0, 
      minorTickInterval: null, 
      tickPixelInterval: 400, 
      tickWidth: 0, 
      title: { 
       y: -70 
      }, 
      labels: { 
       y: 16 
      } 
     }, 

     plotOptions: { 
      solidgauge: { 
       dataLabels: { 
        y: 5, 
        borderWidth: 0, 
        useHTML: true 
       } 
      } 
     } 
    }; 


    $('#{{$divname}}').highcharts(Highcharts.merge(gaugeOptions, { 
     yAxis: { 
      min: {{ $minValue }}, 
      max: {{ $maxValue }}, 
      title: { 
       text: '{{ $chartTitle }} ' 
      } 
     }, 

     credits: { 
      enabled: false 
     }, 

     series: [{ 
      name: '{{ $chartTitle }}', 
      data: [{{ $value}} ], 
      dataLabels: { 
       format: '<div style=\"text-align:center\"><span style=\"font-size:25px;color:' + 
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '\">{y}</span><br/>' + 
         '<span style=\"font-size:12px;color:silver\">{{$suffix}}</span></div>' 
      }, 
      tooltip: { 
       valueSuffix: ' {{$suffix}}' 
      } 
     }] 

    })); 

}); 

Как вы можете видеть на изображении, первый скрипт работает довольно хорошо, но время рендеринга каждого следующего сценария происходит на той или иной причине. Если я просто отрисую скрипт для одной из диаграмм, он работает нормально.

Любая идея, что меня замедляет?

Answer 1

У меня были одни и те же проблемы, но после профилирования моего приложения laravel я обнаружил, что проблема не в высоких диаграммах, но мои запросы к базе данных не были оптимизированы, поэтому я optimezed, избегая использовать отношения Eloquent или нетерпеливо загружая тяжелые таблицы, You может также рассмотреть возможность использования временных таблиц, ниже приведен пример необработанного запроса в laravel.

public function countOutStanding() 
{ 
    $count= DB::select("SELECT count(1) as count FROM myTable"); 
    return array_shift($count)->count; 
} 

Answer 2

Это на самом деле не проблема с Laravel. Прежде чем перейти в медленное время загрузки, если вы хотите вернуть скрипт, вам нужно установить правильные заголовки.

Это:

return view('highchart.gauge')->with(compact('value' , 'divname','chartTitle','suffix','minValue','maxValue','colorMin','colorMed','colorMax')); 

Должно быть так:

return response(view('highchart.gauge')->with(compact('value' , 'divname','chartTitle','suffix','minValue','maxValue','colorMin','colorMed','colorMax')), 200, ['Content-Type' => 'application/javascript']); 

Теперь, чтобы ответить на медленные времена загрузки, вы загружаются ... 12 сценариев или так? Чтобы минимизировать время загрузки, вы должны свести к минимуму количество обращений в оба конца/иметь меньше HTTP-запросов. Каждый браузер имеет максимальное количество одновременных HTTP-соединений на сервер, что иллюстрирует ваш образ. Он одновременно загружает 2 (или так?) Скрипта за раз.

В дополнение к этому, вы используете Laravel для анализа ваших скриптов, а не просто для обслуживания файла javascript. Это накладные расходы. Так что вам нужно делать?

1. Минимизировать HTTP-запросы.
2. Если возможно, просто откройте файл, а не выполните синтаксический анализ сценария.

Одним из способов минимизации HTTP-запросов является отправка всех переменных одновременно, а затем возврат конкатенированного представления. Для того, чтобы сцепить взгляды, вы можете просто использовать период, как вы бы со строками:

return response(view(...) . view(...), 200, ['Content-Type' => 'application/javascript']); 

Еще один способ, который я рекомендовал бы, должен был бы переместить highchart скрипт в общий каталог. Затем в файле вашего лезвия просто сохраните переменные в массиве javascript. Ваш скрипт высокой четкости может затем выполнить цикл и инициализировать диаграмму (ы).