javascript - Internet Explorer 延迟启动 AJAX 调用

Question

我的 jQuery 在 Firefox、Chrome 和 Opera 中运行良好，但在 Internet Explorer 中需要很长时间才能启动。

我读过很多文章，并试图让我的代码尽可能快，避免按类选择、foreach循环等，但即使我发送一个相对“快速”的请求，它也需要很长时间才能开始。例如:

function getDisturbanceData() {
    $body.addClass("loading");
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetAllDisturbances",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({
            "itemsPerPage": itemsPerPage
        }),
        success: function (data) {
            CreateTable(data.d);
            $body.removeClass("loading");
        }
    });
};

在 $body.addClass("loading"); 开始之前，上述过程大约需要 1 秒。代码本身足够快，加载屏幕出现和创建表格之间的时间并不比任何其他浏览器长，但页面有点卡住，直到用户可以看到加载屏幕。我知道代码需要时间才能完成，因为我在这里加载了大量数据(在 Chrome 中通常为 1.4 秒)，这就是加载屏幕的原因，但我无法解释在此之前的时间。

其他信息:我使用 ASP.NET 框架和 webshim.polyfill 来支持 Internet Explorer + Firefox。在默认的 ASP.NET javascript 文件旁边，我只导入了 bootstrap.css/js、bootstrap-tokenfield.css/js、jquery-ui.css 和标准 jquery

我对 Internet Explorer 一无所知，也不知道如何才能加快它的速度。你能帮我一下吗？

当您需要更多信息时，如果您能清楚地询问您想要什么并描述我如何提供它们，那就太好了，因为我从未遇到过这样的问题。

更新问题可能出在页面加载时调用一次的这部分代码中吗？它只是检查 C# 后端中的 Session 变量并返回 true 或 false，但它是异步的

function IsUserLogedIn(handleData) {
$.ajax({
    type: "POST",
    async: !1,
    url: "logon.aspx/IsUserLogedIn",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        handleData(data.d);
    }
});

}

Update2
我现在知道是什么导致 Internet Explorer 中的页面速度变慢，但我完全不知道原因。这几行

<div id="logon_table">
    <asp:Label ID="lblName" runat="server" Font-Bold="true" Text="Name:"></asp:Label><br />
    <input type="text" ID="txtName" /><br /><br />
    <asp:Label ID="lblpwd" runat="server" Font-Bold="true" Text="Passwort:"></asp:Label><br />
    <input type="password" id="txtPassword"/><!--this element is the problem--><br /><br />
    <input type="button" ID="ButtonLogin" Value="Login" autofocus />
    <input type="button" ID="ButtonCancel" Value="Abbrechen"  />
</div>

减慢我的页面速度。当我删除它们时，一旦它们进入，一切都会正常工作 - 即使没有任何 css/js 附加到这些元素每个交互都会延迟 1 秒。当我删除每个类和每个后台操作时，用户仍然必须等待，直到单击链接。有谁知道为什么吗？

Answer 1

我怀疑您将所有代码都放在页面底部某处的 $(document).ready() 处理程序中，这意味着在浏览器通知之前不会开始获取 Ajax 资源DOM 已完全加载。

请像这样组织您的代码。在 $(document).ready() 之外:

function getDisturbanceData(itemsPerPage) {
    // don't use a POST request to GET data
    return $.ajax({
        type: "POST",
        url: "Default.aspx/GetAllDisturbances",
        dataType: "json",
        data: {
            itemsPerPage: itemsPerPage    // jQuery does the JSON serializing
        }                                 // (also think whether JSON is necessary to
    });                                   // deliver *a single* parameter)
}

$('body').addClass("loading");
var disturbanceData = getDisturbanceData(25);

现在，在常规 $(document).ready() 处理程序内部:

disturbanceData.done(function (data) {
    CreateTable(data.d);
}).fail(function (jqXhr, status, error) {
    // show the error somewhere
}).always(function () {
    $('body').removeClass("loading");
});

这是加载 Ajax 资源的一般技巧。尽快开始请求他们。然后使用the promise interface of jQuery Ajax requests加载文档时处理结果。