[Solved]-php: laravel slow view render time when rendering javascript for highcharts-Highcharts

I had same issues, but after profiling my laravel application, I found that the issue is not highcharts but my queries to database were not optimzied, so I optimezed by avoiding to use Eloquent relationship or eager loading for heavy tables, You can also consider to use temporary tables,below is a sample of raw query in laravel.

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

This is actually not a Laravel issue. Before I get into the slow load times, if you want to return a script, you need to set the correct headers.

This:

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

Should be this:

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

Now to answer the slow load times, you are loading...12 scripts or so? In order to minimize load times, you should minimize the number of roundtrips / have fewer HTTP requests. Each browser has a max number of simultaneous HTTP connections per server, which is what your image is illustrating. It's simultaneously loading 2 (or so?) scripts at a time.

In addition to this, you are using Laravel to parse your scripts rather than just simply serving a javascript file. That's a lot of overhead. So what do you need to do?

1. Minimize HTTP requests.
2. If possible, just serve a file rather than having the server parse the script.

One way to minimize HTTP requests is to send all the variables at once and then return the concatenated view. In order to concatenate views, you can just use the period like you would with strings:

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

Another way, which I would recommend, would be to move your highchart script to your public directory. Then, in your blade file, just store the variables in a javascript array. Your highchart script can then loop through that and initialize the chart(s).