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

Posted 2023-03-14

【中文标题】php：为highcharts渲染javascript时，laravel慢视图渲染时间

【英文标题】：php: laravel slow view render time when rendering javascript for highcharts

【发布时间】：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 文件？

您从哪里获取来自控制器的数据以将其传递给图表？

【参考方案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;