Question

我知道IE浏览器的javascript性能与FF和Chrome相比非常糟糕，但我的大部分用户都使用IE8。我没有注意到FF中的性能问题（惊喜）。我正在使用Jquery和Jquery-ui来实现对话功能。

基本上，我有很多链接，我使用ajax加载到一个对话框中。第一次单击按钮调出对话框时，它加载速度非常快（~0.1s）。但是，当我关闭对话框并再次启动时，显示的时间要长得多。

数据库和ajax调用不是问题。数据被附加到对话框中，我使用简单的逻辑来确保不再调用该函数。打开对话框的后续尝试应该更快。

使用IE8的分析器我注意到有成千上万的调用：

"hidden"
"curCSS"
"JScript - window script block"

首次打开对话框时，这些函数调用不会出现。我理所当然地感到茫然。

显然，在第一次加载时，对话框中的各个元素都没有发生任何脚本，但为什么这会在后续调用中发生变化？

一些代码：

$（document）.ready（function（）{

$("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    draggable: false,
    closeText: "",
    width: "auto",
    dialogClass: "ddx",
});


$("#button").click(function (e) {
    e.preventDefault();

    //Check if "this" is empty, if not, data is already loaded
    if ($.trim($("#dialog").html()).length > 0) {
        $("#dialog").dialog("open");
    }
    else {

        $.ajax({
            url: baseUrl,
            dataType: "text",
            success: function (data) {
                $("#dialog").append(data);

            }
        }); 
        $("#dialog").dialog("open");
    }
}); 
});

身体中的HTML：

<div id="dialog" title="Test Dialog" class="ddx"></div>

该对话框最终包含几个级别的嵌套列表，包含数百个li。

Answer 1

后续调用可能比第一次调用慢的一个原因是，通过ajax替换HTML比添加新代码更昂贵。这是因为jquery需要在添加新内容之前删除和清除旧的DOM元素。

关闭后，您的第一个窗口可能会隐藏在DOM中，并在下次打开窗口时被替换。

此外，jQuery UI对大型Ajax请求具有相当大的性能影响，尤其是在Internet Explorer中，因为cleanData-Method的执行速度很慢。

jQueryUI cleanData performance bug

作为示例：使用jQuery-UI替换2500个DOM元素在IE8中将花费大约600毫秒。没有jQueryUI，这需要大约200毫秒。

我通过替换cleanData-Method在我自己的代码中解决了这个问题，并且它显着加快了我的应用程序（参见jsfiddle/cleanData）。我仍然在寻找一个适用于所有jQuery-Versions的jQuery-UI补丁。

//replace this
$.cleanData = function( elems ) {...}

在IE8中加载缓慢的JQuery UI对话框（第一次快速加载）

1 个答案: