javascript - 附加大文档时，UI响应太慢

我有一个引导选项卡控件，那很好。在每个选项卡上，我需要加载一个html文档(大文件可能大于10MB)。一切正常。但是加载数据后，UI响应太慢，即使切换标签也需要5.6秒。
点击时不希望有任何延迟。用户界面应该每次都响应。
我有什么办法可以做到这一点？
这是我到目前为止所做的...

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#dpa" data-toggle="tab">DPA</a></li>
            <li><a href="#rn" data-toggle="tab">Antwon</a></li>
        </ul>

        <div class="tab-content" style="width:100%;height:600px;">
            <div class="tab-pane active" id="home">
                <p>test</p>
            </div>
            <div class="tab-pane" id="dpa" data-src="../TabsData/data2.htm">
                <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
            <div class="tab-pane" id="rn" data-src="../TabsData/data2.htm">
               <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
        </div>
    </div>
</div>

//JavaScript代码

$('#myTabs').bind('shown.bs.tab', function (e) {
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if ($(paneID + " iframe").attr("src") == "") {
       $(paneID + " iframe").attr("src", src);
    }
});

注意:好的，因为加载的数据量很大，加载时响应速度会很慢。但是，为什么一旦加载完所有东西就变慢呢？

最佳答案

由于要在制表符更改中加载大文件，因此最好在使用前先将它们加载到后台，然后再执行任何操作。

在标记中指定iframe源，而不是动态加载它。这样，甚至在用户单击选项卡之前，也将下载数据。

边注
可以将$(paneID).attr('data-src')更改为适当的数据属性用法$(paneID).data('src')$(paneID)[0].children[0].innerHTML = data我看不到您在哪里设置data变量$(paneID)[0].children[0].innerHTML = data可以更改为jQuery:$(paneID).children().eq(0).html(data)$(paneID + " iframe")可以更改为var pane = $(paneID); $('iframe', pane)。另外，在多个位置使用元素时，最好将其缓存。