Question

我在建立的网站上遇到了一个奇怪的问题。在有问题的页面上我使用了一些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: '<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问题。在进入慢加载时间之前，如果要返回脚本，则需要设置正确的标题。

此：

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数组中。然后，您的高级脚本可以遍历该脚本并初始化图表。

Answer 2

我有同样的问题，但在分析了我的laravel应用程序之后，我发现问题不是高级图表，但我对数据库的查询没有得到优化，所以我通过避免使用Eloquent关系或急切加载重型表来进行optimezed，你可以还考虑使用临时表，下面是laravel中的原始查询示例。

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

php：laravel慢速视图渲染jcha for highcharts时的渲染时间

2 个答案: