php: czas renderowania wolnego widoku laravel podczas renderowania javascript dla haseł

Question

Mam dziwny problem na stronie, którą buduję. Na stronie, która ma problem, używam kilku wysokogatunkowych. Wszystko działa dobrze, ale czas renderowania jest o wiele za długi (około 5 sekund).

Kiedy sprawdzać go w chromie, widzę coś takiego:

W 8 skrypty dla highcharts są w czerwonym polu. Jasne jest, że problem jest tam.

Do renderowania skryptów do highcharts (javascript), utworzyłem kontroler i widoki. Używam ich w szablonie w ten sposób:

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

iw sterowniku highchart po prostu wysłać zmienną do widzenia:

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

Widok wtedy właśnie czyni javascript, wprowadzenie zmiennych na właściwym miejscu:

$(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}}' 
      } 
     }] 

    })); 

}); 

Jak widać na zdjęciu, pierwszy skrypt działa całkiem ok, ale czas renderowania każdego następnego scenariusza będzie dla jednej lub innego powodu. Jeśli po prostu wykonam skrypt dla jednego z wykresów, to działa dobrze.

Każdy pomysł, co mnie spowalnia?

Answer 1

Miałem te same problemy, ale po profilowaniu mojej aplikacji do laravel, stwierdziłem, że problem nie jest highcharts, ale moje zapytania do bazy danych nie zostały zoptymalizowane, więc zoptymalizowałem, unikając używania Eloquent relacji lub chętnego ładowania dla ciężkich tabel, You może również rozważyć użycie tabel tymczasowych, poniżej znajduje się przykład surowego zapytania w języku laravel.

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

Answer 2

To nie jest kwestia Laravel. Zanim dostanę się do wolnych czasów ładowania, jeśli chcesz zwrócić skrypt, musisz ustawić poprawne nagłówki.

to:

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

Powinno być tak:

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

teraz odpowiedzieć na powolny czas ładowania, jesteś ładuje ... 12 skrypty czy tak? Aby zminimalizować czas ładowania, należy zminimalizować liczbę połączeń zwrotnych/mieć mniej żądań HTTP. Każda przeglądarka ma maksymalną liczbę równoczesnych połączeń HTTP na serwer, co jest tym, co obraz przedstawia. Jednocześnie ładuje 2 (lub mniej?) Skrypty naraz.

Oprócz tego, używasz Laravel do analizowania skryptów, a nie po prostu serwowania pliku javascript. To dużo narzutów. Co więc musisz zrobić?

1. Zminimalizuj żądania HTTP.
2. Jeśli to możliwe, po prostu serwuj plik, a nie serwer analizuj skrypt.

Jednym ze sposobów minimalizacji żądań HTTP jest wysłanie wszystkich zmiennych jednocześnie, a następnie zwrócenie połączonego widoku. Aby złączyć widoki, można po prostu wykorzystać okres jak byś z ciągów:

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

inny sposób, który polecam, byłoby przenieść skrypt highchart do katalogu publicznego. Następnie, w swoim pliku blade, po prostu przechowuj zmienne w tablicy javascript. Twój skrypt highchart może następnie wykonać pętlę i zainicjować wykres (y).