Javascript 如何使Grafana iframes加载更快？

我通过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}" width="100%" height="451px" 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);
        }
    });



}
});

ajax.done（函数（标题）{
//log（“%c titles=”+titles，“颜色：绿色；”）；
对于（变量i=0；i

---

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

58.1 MB的传输量

-这是因为您有12个iframe=12个Grafana窗口，每个iframe反复加载相同的静态文件：

• 您可以尝试启用

  enable_gzip

  Grafana配置
• ads将适当的头缓存到静态Grafana资源，因此它们将缓存在浏览器中，而不需要一次又一次地重新下载-为此，您可能需要在Grafana前面使用反向代理
• 启用http2协议-为此，您可能需要在Grafana前面使用反向代理

---

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

不确定100%，但您是否可以使用缓存系统？