Question

我在肯塔基州路易斯维尔的公立学校系统工作。我正在使用html5，bootstrap和asp.net/C#进行开发。

我正在开发一个网页来显示我们学校的出勤率数据，总共约有180所学校。数据集从SQL Server数据库中提取，并在c＃codebehind中动态构建。加载所有180所学校的数据初始加载大约需要5秒钟。

选项卡用于显示过滤后的数据 - 初始活动选项卡显示所有学生。其他选项卡会过滤以显示正在午餐计划中，有辍学风险的学生等等。

<script type="text/javascript">
    //Called when the tab changes
    function changeFilter(filterType) {
        $("#filterType").val(filterType);

        console.log("here");
        //__doPostBack();
    }

    $(window).load(function () {
        console.log("done");
    });
</script>

在初始开发过程中，我将数据集向下过滤，仅显示一所学校的数据。一切都很好 - 在标签之间切换非常快。但是，当我删除过滤器并开始为每所学校传入数据时，它开始需要7-10秒才能从一个标签切换到另一个标签。我的第一个想法是，它是一个相当大的数据集，所以也许它只需要一段时间来加载。使用jQuery我在window.load事件中放置了一个控制台消息，以便我可以判断页面何时完成加载。在它完全加载后我尝试切换到另一个选项卡 - 并使用选项卡onclick事件我发送了另一个控制台消息告诉我新选项卡已被选中。这个＆＃34;在这里＆＃34;消息立即显示，但在切换到它之前仍有7-10秒的延迟。正如您在下面看到的那样，我已经注释掉了doPostBack并在我的page_load代码隐藏函数中设置了一个断点，以验证它是否没有触及后面的代码。

SELECT 
    a.Product_ID , b.Parent_Product_ID, b.Product_Name 
    FROM Product a, Product b
    where a.Product_ID = b.Parent_Product_ID

此时，我已从初始非活动标签中删除了所有数据加载事件，以便在选择它们时，它应立即显示一个空面板。加载的唯一数据是初始页面加载，正如我所提到的那样大约需要5秒钟。在加载完成后执行此操作并选择新选项卡仍需要7-10秒。如果我根本不加载任何数据，包括不加载初始数据加载，那么在标签之间切换会变得非常快。

为什么大型数据集会在切换标签之间造成这种延迟的任何建议？

使用大数据集在Bootstrap选项卡之间切换速度很慢

0 个答案: