php: लार्वेल धीमी दृश्य उच्चतर के लिए जावास्क्रिप्ट को प्रस्तुत करते समय समय प्रस्तुत करें

Question

मुझे एक ऐसी वेबसाइट में एक अजीब समस्या है जिसे मैं बना रहा हूं। जिस पृष्ठ पर समस्या है, मैं कुछ हाईचार्ट्स का उपयोग कर रहा हूं। सब ठीक काम करता है, लेकिन प्रतिपादन समय बहुत लंबा है (लगभग 5 सेकंड)।

Highcharts के लिए 8 लिपियों लाल बॉक्स में कर रहे हैं:

जब मैंने इसे क्रोम में निरीक्षण, मैं कुछ इस तरह देखते हैं। यह स्पष्ट है कि समस्या वहां है।

हाईचार्ट्स (जावास्क्रिप्ट) के लिए स्क्रिप्ट प्रस्तुत करने के लिए, मैंने नियंत्रक और विचार बनाए। मैं इस तरह से टेम्पलेट में उन्हें इस्तेमाल:

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

दृश्य तो बस जावास्क्रिप्ट प्रस्तुत हुई है, चर में डाल सही जगह पर:

$(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

मेरे पास एक ही समस्या थी, लेकिन मेरे लार्वा एप्लिकेशन को प्रोफाइल करने के बाद, मैंने पाया कि यह मुद्दा उच्चतर नहीं है लेकिन डेटाबेस के लिए मेरे प्रश्नों को अनुकूलित नहीं किया गया था, इसलिए मैंने भारी तालिकाओं का उपयोग करने या भारी टेबल के लिए उत्सुक लोडिंग से बचकर ऑप्टिमाइज़ किया, आप अस्थायी तालिकाओं का उपयोग करने पर भी विचार कर सकते हैं, नीचे लार्वेल में कच्ची क्वेरी का नमूना है।

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

Answer 2

यह वास्तव में एक लार्वा मुद्दा नहीं है। धीमी लोड समय में आने से पहले, यदि आप एक स्क्रिप्ट वापस करना चाहते हैं, तो आपको सही शीर्षलेख सेट करने की आवश्यकता है।

यह:

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

अब धीमी गति से लोड समय जवाब देने के लिए, आप लोड कर रहे हैं ... 12 स्क्रिप्ट या तो:

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

इस होना चाहिए? लोड समय को कम करने के लिए, आपको राउंडट्रिप्स की संख्या को कम करना चाहिए/कम HTTP अनुरोध होना चाहिए। प्रत्येक ब्राउज़र में प्रति सर्वर एक साथ HTTP कनेक्शन की अधिकतम संख्या होती है, जो आपकी छवि का वर्णन करती है। यह एक समय में 2 (या तो?) स्क्रिप्ट लोड कर रहा है।

इसके अतिरिक्त, आप केवल जावास्क्रिप्ट फ़ाइल की सेवा करने के बजाय अपनी स्क्रिप्ट को पार्स करने के लिए लार्वेल का उपयोग कर रहे हैं। यह बहुत अधिक है। तो तुम्हें क्या करने की जरूरत है?

1. HTTP अनुरोधों को कम करें।
2. यदि संभव हो, तो सर्वर को स्क्रिप्ट को पार्स करने के बजाए बस एक फ़ाइल की सेवा करें।

HTTP अनुरोधों को कम करने का एक तरीका है सभी चर एक बार में भेजना और फिर समेकित दृश्य को वापस करना। एक और तरीका है, जो मैं सिफारिश करेंगे

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

, आपकी सार्वजनिक निर्देशिका में अपनी highchart स्क्रिप्ट स्थानांतरित करने के लिए होगा: देखे जाने की संख्या को श्रेणीबद्ध करने के लिए, तुम सिर्फ अवधि क्या तुम करोगी तरह तार के साथ उपयोग कर सकते हैं। फिर, अपनी ब्लेड फ़ाइल में, बस जावास्क्रिप्ट सरणी में चर को स्टोर करें। आपकी हाईकार्ट स्क्रिप्ट उसके माध्यम से लूप कर सकती है और चार्ट को प्रारंभ कर सकती है।