php:laravel慢速视图渲染时为渲染javascript for highcharts

我正在建立的网站中有一个奇怪的问题.在有问题的页面上我使用了一些highcharts.一切正常,但渲染时间太长(约5秒).

当我用chrome检查它时,我看到这样的东西:

highcharts的8个脚本位于红色框中.很明显,问题出在那里.

为了渲染highcharts(javascript)的脚本,我创建了一个控制器和视图.我以这种方式在模板中使用它们:

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

在高图控制器中我只是将变量发送到视图:

 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: '
{y}
' +
                       '{{$suffix}}
'
            },
            tooltip: {
                valueSuffix: ' {{$suffix}}'
            }
        }]

    }));

});

正如您在图像中看到的那样,第一个脚本工作正常,但是每个后续脚本的渲染时间都会因一个或另一个原因而上升.如果我只是为其中一个图表渲染脚本,它工作正常.

什么在减慢我的速度？

这实际上不是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文件.这是很多开销.那么你需要做什么？

最小化HTTP请求.

如果可能,只需提供文件而不是让服务器解析脚本.

最小化HTTP请求的一种方法是一次发送所有变量,然后返回连接视图.为了连接视图,您可以像使用字符串一样使用句点:

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

我建议的另一种方法是将高图脚本移动到公共目录.然后,在您的刀片文件中,只需将变量存储在javascript数组中.然后,您的高图脚本可以遍历该脚本并初始化图表.