如何让我的 Grafana iframe 加载更快？

Posted 2023-02-16

【中文标题】如何让我的 Grafana iframe 加载更快？

【英文标题】：How can I make my Grafana iframes load faster?

【发布时间】：2020-03-21 06:26:03

【问题描述】：

我通过 iframe 将 12 个 Grafana 图表嵌入到我的页面中

加载页面大约需要 21 秒。

如果我将相同的仪表板加载到 Grafana 网站本身，则需要 3 秒。

这是我嵌入它的方式：

ajax.done(function (titles) 

// console.log('%c titles = ' + titles, "color: green;");

for (var i = 0; i < titles.length; i++) 

    var data         = ;
    data.sessionName = " $sessionName ";
    data.type        = " $type ";
    data.title       = titles[i];

    // console.log(JSON.stringify(data));

    $.ajax(
        method: 'POST',
        url: `/graphs/chartsBaseOnTitle`,
        crossDomain: true,
        contentType: false,
        headers: 
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
            "Accept": "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache"
        ,
        data: data,
        success: function(charts)

            // console.log('charts = ', charts);

            for (var i = 0; i < charts.length; i++) 

                var title     = charts[i].accordionTitle.replace(" ", "");
                var iFrameUrl = charts[i].iFrameUrl;
                var colSize   = 12/charts.length;

                var iframe = `
                <div class="col-sm-$colSize">
                <iframe async id="$title" src="$iFrameUrl"   frameborder="0"></iframe>
                </div>
                `;

                $('div#'+title).append(iframe);

                console.log('%c title = ' + title, "color: green;");

            


        ,
        error: function(jqXHR, textStatus, errorThrown) 
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        
    );




);

我可以做些什么来减少这种巨大的延迟？

【问题讨论】：

不确定 100%，但您可以使用缓存系统吗？ grafana.com/docs/installation/configuration/#remote-cache

【参考方案1】：

58.1 MB transferred - 那是因为你有 12 个 iframe = 12 个 Grafana 窗口，每个 iframe 一次又一次地加载相同的静态文件：

您可以尝试启用enable_gzip Grafana config 为静态 Grafana 资源添加适当的缓存标头，因此它们将被缓存在浏览器中，并且不需要一次又一次地重新下载 - 为此您可能需要在 Grafana 前面使用反向代理 启用 http2 协议 - 为此，您可能需要在 Grafana 前面使用反向代理

您也可以创建第一个 iframe，其他 iframe 仅在第一个 iframe 加载时创建（或添加静态延迟）。