php：为highcharts渲染javascript时，laravel慢视图渲染时间答案

【问题标题】：php: laravel slow view render time when rendering javascript for highchartsphp：为highcharts渲染javascript时，laravel慢视图渲染时间
【发布时间】：2016-04-14 03:17:03
【问题描述】：

我正在构建的网站中有一个奇怪的问题。在有问题的页面上，我使用了一些 highcharts。一切正常，但渲染时间太长（大约 5 秒）。

当我在 chrome 中检查它时，我看到如下内容：

highcharts 的 8 个脚本在红色框中。很明显，问题就在那里。

为了渲染 highcharts (javascript) 的脚本，我创建了一个控制器和视图。我是这样在模板中使用它们的：

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

然后视图只呈现 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}}'
            }
        }]

    }));

});

正如您在图片中看到的，第一个脚本运行良好，但是由于某种原因，每个后续脚本的渲染时间都在增加。如果我只是为其中一个图表渲染脚本，它就可以正常工作。

知道是什么让我慢了下来吗？

【问题讨论】：

如果您尝试直接从浏览器打开脚本会发生什么？需要那么长时间吗？
另外，{{ $value }} 中究竟包含了多少数据？老实说，我不知道你为什么不只是使用 ajax 调用将数据加载到 js 中，而不是使用服务器生成 js 文件？
您从哪里获取来自控制器的数据以将其传递给图表？

标签： javascript php jquery laravel highcharts

【解决方案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']);

我推荐的另一种方法是将您的 highchart 脚本移动到您的公共目录。然后，在您的刀片文件中，只需将变量存储在 javascript 数组中。然后，您的 highchart 脚本可以循环并初始化图表。

【讨论】：

【解决方案2】：

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

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

【讨论】：