在IE7中打开jquery UI对话框慢得让人头晕目眩

Question

我有大量的HTML，但我认为瓶颈在哪里是不正确的:它发生在我打开对话框时，而不是在构建HTML字符串时(~35ms)，也不是在我将其附加到对话框容器div时(~50ms)。在FF中调用下面的对话框(“open”)时，我始终收到1800+ ms，IE7约为17000(!)女士。我可以忍受1800ms，但在IE7 (占我用户群的99%)，这太长了。

// prep dialog
$("#print-box").dialog({
    bgiframe: false,
    width:900,
    height: 1000,
    modal: true,
    autoOpen: false,
    draggable: false
    });

// display selected items in print preview modal
$("#print-preview").click( function() {

    $('#print-box').empty();

    var tmp = ['<div class="print-container">'];
    var rows = $('[name="print-this-listing"]:checked').parents("div.listing").clone();

    for (var i=0; i < rows.length; i++) {
        tmp.push($(rows[i]).html());
    }

    tmp.push('</div>');

    $('#print-box').html(tmp.join(''));
    $('#print-box').dialog('open');
});

有什么想法吗？我正在尝试构建一个打印预览页面，而不是再次往返于服务器来获取所有这些数据，但现在它比客户端快得多。

Answer 1

我在使用jQuery UI对话框时遇到了类似的问题。要加快速度，请尝试先打开对话框，然后追加数据。

    $('#print-box').dialog('open');
    $('#print-box').html(tmp.join(''));

这似乎对我有帮助。还要检查要追加的字符串中是否有任何损坏的标记或格式错误的HTML。

Answer 2

尽管上面的html()代码确实强制IE在我的例子中更快地呈现对话框，但事实证明是我在创建对话框后发出的ajax请求导致了IE中的速度变慢。这个特定的web应用程序需要在单击保存按钮后显示一个等待对话框。

使用setTimeout允许ajax请求发生在对话框呈现之外。下面是我使用的基本代码：

    function request(requestURL, sendData, asyncRequest) {
        return jQuery.ajax(
        {
            url: requestURL,
            type: 'POST',
            datatype: 'json',
            data: sendData,
            contentType: 'application/json; charset=utf-8',
            async: asyncRequest,
            success: function (data, result) {
                if (!result)
                    alert('Failure to retrieve the related lookup data: ' + requestURL);
            }
        }).responseText;
    }

    function modifyProperties(postData) {
        var d;

        // create wait dialog
        jQuery("#wait").dialog({
            maxWidth: 125,
            maxHeight: 75,
            minWidth: 125,
            minHeight: 75,
            modal: true,
            resizable: false
        });

        // ie fix to ensure dialog is rendered prior to ajax request
        setTimeout(function () {
            // make an ajax request after 500ms
            d = request('/mywebservice', postData, false);
            jQuery("#wait").dialog("close");
            var responseObject = JSON.parse(d);
        }, 500);

        return true;
    }

    modifyProperties();