1

我知道 IE javascript 的性能与 FF 和 Chrome 相比非常糟糕，但我的大多数用户都使用 IE8。我没有注意到 FF 中的性能问题（惊喜）。我将 Jquery 和 Jquery-ui 用于对话框功能。

基本上，我使用 ajax 将大量链接加载到对话框中。我第一次单击按钮打开对话框时，它加载得非常快（~0.1 秒）。但是，当我关闭对话框并再次打开它时，它需要更长的时间才能显示出来。

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

使用 IE8 的分析器，我注意到有数以万计的调用：

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

我第一次打开对话框时不会出现这些函数调用。我不知所措是有原因的。

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

一些代码：

$(文档).ready(函数 () {

$("#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 的多层嵌套列表。

4

1 回答 1

0

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

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

此外，jQuery UI 对大型 Ajax-Request 有相当大的性能影响，尤其是在 Internet Explorer 中，因为 cleanData-Method 的实现很慢。

jQueryUI cleanData 性能错误

例如：在 IE8 中用 jQuery-UI 替换 2500 个 DOM 元素将花费大约 600 毫秒。如果没有 jQueryUI，这会花费大约 200 毫秒。

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

//replace this
$.cleanData = function( elems ) {...}
于 2013-09-10T07:25:01.523 回答