javascript – 当连接大文档时,UI响应太慢

我有一个引导选项卡控件,这很好.在每个选项卡上,我需要加载一个html文档(大可能大于10MB).一切都很好但在加载数据后,UI响应太慢,即使需要5,6秒来切换选项卡.
点击时不需要任何延迟. UI应该每次都响应.
我有什么办法实现吗？
这是我迄今为止所做的

<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" src="../TabsData/data2.htm">
                <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
            <div class="tab-pane" id="rn" 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);
    }
});

注意：好的,它应该缓慢加载,因为它有大的数据要加载.但为什么一旦一切都被加载,为什么会慢？

解决方法

关于Javascript的是它是单线程的.所以当你尝试这个大的操作时,它会阻止其他的浏览器事件,直到这个操作完成.然而,JavaScript中最近有一些开发允许多线程进程.

选项1 – 网络工作者

查看并利用Web Workers来抵消流程,使其不影响UI的响应.

选项2 – AJAX

使用AJAX加载您的HTML,以便该进程是异步的.这样,浏览器可以在后台加载而不影响您的UI.

$("#yourDiv").load("demo_test.html");

两者都将解决您的UI问题,因为它正确地将浏览器资源分配给“另一个线程”.

原文地址：https://www.jb51.cc/js/152015.html