在 IE7 中打开 jquery UI 对话框的速度慢得令人麻木答案

【问题标题】：jquery UI dialog open is mind-numbingly slow in IE7在 IE7 中打开 jquery UI 对话框的速度慢得令人麻木
【发布时间】：2009-05-26 01:54:00
【问题描述】：

有大量的 HTML，但我认为瓶颈是不正确的：它是在我打开对话框时，而不是在我构建 HTML 字符串时（~35ms），也不是当我在将其附加到对话框容器 div (~50ms)。在 FF 中调用 dialog("open") 下面时，我一直得到 1800+ 毫秒，IE7 大约是 17000（！）毫秒。我可以忍受 1800 毫秒，但在 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');
});

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

【问题讨论】：

标签： jquery jquery-ui internet-explorer-7 modal-dialog performance

【解决方案1】：

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

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

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

【讨论】：

谢谢。我最终使用 iframe 作为“预览窗口”并从 DOM 中隐藏元素，但又返回了，这确实明显更快——对于我的大量数据需求来说仍然不能接受，但仍然更快。
我在 IE6 和 IE8 中遇到了同样的问题。我的解决方法是进行 ajax 调用以获取对话框的内容，并在打开对话框后将其设置为对话框的内容，如this 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();

【讨论】：