启用到期

Question

我有一个引导标签控件，这很好。在每个选项卡上我需要加载一个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" 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);
    }
});

注意：好的，它应该在加载时响应缓慢，因为它有大量数据需要加载。但是一旦装满所有东西，为什么会变慢呢？

Answer 1

由于您在选项卡上加载大文件，因此最好在使用前将它们加载到后台甚至进行任何操作。

在标记中指定$(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)可以更改为DECLARE @sql NVARCHAR(MAX) = ''; SELECT @sql = 'SELECT x.NC1, x.NC2 FROM tbl t CROSS APPLY ( VALUES ' + (SELECT STUFF(( SELECT ',(''' +COLUMN_NAME + ''', ' + QUOTENAME(COLUMN_NAME) + ')' FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'Tbl' FOR XML PATH('') ), 1, 1, '')) + ') x (NC1, NC2) WHERE t.C1 = ''V11'''; PRINT (@sql); EXEC (@sql);。另外，在多个地方使用它时，最好缓存元素。

Answer 2

关于Javascript的事情是它是单线程的。因此，当您尝试此大型操作时，它会阻止其他浏览器事件，直到此操作完成。然而，最近Javascript的发展已经允许多线程进程。

选项1 - 网络工作者

查看并利用Web Workers来抵消流程，以免影响用户界面的响应能力。

选项2 - AJAX

使用AJAX加载HTML，以使进程异步。这样，浏览器可以在后台加载，而不会影响您的用户界面。

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

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

Answer 3

我创建了一个快速网站，复制您想要实现的目标。我使用了bootstrap提供的默认选项卡javascript。请参阅以下完整代码：

<!DOCTYPE html>
<html lang="en">
<head>

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<header></header>
<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">
            <iframe src="1.html" style="width:100%;height:600px"></iframe>
        </div>
        <div class="tab-pane" id="rn">
           <iframe src="2.html" style="width:100%;height:600px"></iframe>
        </div>
    </div>
</div>
</div>
</body>
<footer></footer>
</html>

引导脚本包含选项卡工作所需的全部内容，因此不需要您自己的javascript。 1.html和2.html是您在评论中提供的数据的副本。

Answer 4

我认为有些事情会提高你的速度

首先缩小html文档，检查此图像，您将减少2mb左右
第二次使用ajax方法加载文件，如$（“selector”）。load（“href”）;

Answer 5

1）浏览器进程在过度使用内存时变慢，因为操作系统没有为它们分配更多的RAM空间，而是需要将一些数据保留在硬盘中，这是一个慢得多的硬件。

2）在你的情况下它不是数据而是UI，这使得浏览器需要更多的内存和更多的CPU，因为UI不是一次又一次地被评估，而是一遍又一遍（这个这就是为什么当浏览器卡住时，你会看到一个空白页面。

3）你的页面非常大。我从来没有遇到这么大的一页。我看过一些非常长的页面，但是你的页面很长，而且＃34; beats＆＃34;他们因为所有的标记。

您别无选择，只能隐藏用户目前尚未查看的用户界面。将所有数据组合在一起是可以的，但是仍然需要分页或任何其他方法来隐藏UI。

Answer 6

为什么不只是gzip内容并在.htaccess文件中设置过期标头

启用到期

ExpiresActive On

默认指令

ExpiresDefault“访问加1个月”

我的favicon

ExpiresByType image / x-icon“access plus 1 year”

图片

ExpiresByType image / gif“access plus 1 month” ExpiresByType image / png“access plus 1 month” ExpiresByType image / jpg“access plus 1 month” ExpiresByType image / jpeg“access plus 1 month”

CSS

ExpiresByType text / css“access plus 1 month”

的Javascript

ExpiresByType应用程序/ javascript“访问加1年”

＃压缩HTML，CSS，JavaScript，文本，XML和字体 AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / vnd.ms-fontobject AddOutputFilterByType DEFLATE application / x-font AddOutputFilterByType DEFLATE application / x-font-opentype AddOutputFilterByType DEFLATE application / x-font-otf AddOutputFilterByType DEFLATE application / x-font-truetype AddOutputFilterByType DEFLATE application / x-font-ttf AddOutputFilterByType DEFLATE application / x-javascript AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE font / opentype AddOutputFilterByType DEFLATE font / otf AddOutputFilterByType DEFLATE font / ttf AddOutputFilterByType DEFLATE image / svg + xml AddOutputFilterByType DEFLATE image / x-icon AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE text / javascript AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / xml

＃删除浏览器错误（仅限真正的旧版浏览器） BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4.0 [678] no-gzip BrowserMatch \ bMSIE！no-gzip！gzip-only-text / html 标题附加Vary User-Agent

因为它会将数据保存在缓存中并且性能会很好我想我不太确定但只是试一试..通常它是因为内存不足或ram ...来处理dom很多过程..

Answer 7

渲染延迟

在加载页面之后，由于渲染周期，一些对代码微不足道的事情可能会导致严重的性能影响，在这种情况下，Tab键API通过隐藏和显示相应的选项卡对页面进行“布局”更改。这需要完全重新呈现选项卡内部html结构，具体取决于选项卡内容，它可能非常密集。

有关浏览器渲染周期的详细信息，请参阅Rendering Performance。

附加大文档时UI响应太慢

7 个答案:

启用到期

默认指令

我的favicon

图片

CSS

的Javascript

渲染延迟